谷歌地圖顯示一系列航路點，連接起來形成一條路線。航點只是一個紅色的小圓圈。還有其他幾個標記：感興趣的地方、交通連接等，在這里沒有直接關系。所有航點等都是從 MySQL 資料庫中檢索的。除了我稱為 wpmark 的航路點外，所有標記都稱為標記。
我有一個 mousemove 偵聽器，它顯示一個連續的 LatLong 和一個單擊偵聽器，它將一個地圖單擊 LatLong 添加到一個文本框。該腳本是 php，它使用 MySQL 資料庫撰寫 JavaScript。該代碼是 JavaScript，經過簡化以洗掉數百個航點和其他所有其他型別的標記。
我想為每個航路點添加一個點擊監聽器，并在附近打開一個視窗，我可以在其中添加一個選單。地圖作業得很好，直到我嘗試在地圖根本不顯示時添加新的偵聽器。
我嘗試了許多格式的 addListener 代碼行，但結果始終相同。哦，對于一個告訴你錯誤是什么的編譯器！
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=myKey'>
</script>
<script type='text/javascript'>
function initialize() { var mapOptions = { draggableCursor: 'crosshair', center: {lat: 55.91, lng: -4.47}, zoom: 15,zoomControl: true };
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var routeCoordinates = [
new google.maps.LatLng(55.9133,-4.4710),
new google.maps.LatLng(55.9133,-4.4719),
new google.maps.LatLng(55.9132,-4.4721)
];
var route = new google.maps.Polyline({ path: routeCoordinates, draggable: false, geodesic: true, strokeColor: '#FF00FF', strokeOpacity: 1, strokeWeight: 4 });
route.setMap(map);setMarkers(map, loc);
google.maps.event.addListener(map,'mousemove',function (event) {
document.getElementById('mm').value = event.latLng.lat().toFixed(6) ', ' event.latLng.lng().toFixed(6) }
);
google.maps.event.addListener(map,'click',function (event) {
document.getElementById('mapclicked').value = document.getElementById('mapclicked').value event.latLng.lat().toFixed(6) ', ' event.latLng.lng().toFixed(6) '; ' }
);
}
var loc = [
["myTitle1",55.9133,-4.4710,"wp"],
["myTitle2",55.9133,-4.4719,"wp"],
["myTitle3",55.9132,-4.4721,"wp"],
];
function setMarkers(map, loc) {
var imageWP = {url: '../img/mapsymbols/waypoint.gif', size: new google.maps.Size(10, 10), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(4,4)};
var shape2525 = { coords: [0, 0, 0, 24, 24, 24, 24, 0], type: 'poly' };
for (var i = 0; i < loc.length; i ) {
var site = loc[i];
var myLatLng = new google.maps.LatLng(site[1], site[2]);
switch (site[3]) {
case 'wp' :var wpmark = new google.maps.Marker({position: myLatLng, zIndex: i, map: map, icon: imageWP,shape: shape2525, title: site[0]}); break;
}
}
}
const wpmenuwindow = new google.maps.InfoWindow({ content: 'Why hello there', });
//The problem is the next line. Remove it and the program works.
google.maps.wpmark.addListener(wpmark, 'click', function(event) { wpmenuwindow.open(map,wpmark); });
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class='eventtext'>Lat Long of cursor:
<div>
<input type='text' id='mm' />
</div> <br /> Coordinates of clicked points:
<div>
<textarea id='mapclicked' rows='10' cols='30'>
</textarea>
</div>
</div>uj5u.com熱心網友回復：
有兩種語法可用于將點擊偵聽器添加到標記。
let wpmenuwindow;
function initialize() {
wpmenuwindow = new google.maps.InfoWindow({
content: 'Why hello there',
});
var mapOptions = {
draggableCursor: 'crosshair',
center: {
lat: 55.91,
lng: -4.47
},
zoom: 15,
zoomControl: true
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var routeCoordinates = [
new google.maps.LatLng(55.9133, -4.4710),
new google.maps.LatLng(55.9133, -4.4719),
new google.maps.LatLng(55.9132, -4.4721)
];
var route = new google.maps.Polyline({
path: routeCoordinates,
draggable: false,
geodesic: true,
strokeColor: '#FF00FF',
strokeOpacity: 1,
strokeWeight: 4
});
route.setMap(map);
setMarkers(map, loc);
google.maps.event.addListener(map, 'mousemove', function(event) {
document.getElementById('mm').value = event.latLng.lat().toFixed(6) ', ' event.latLng.lng().toFixed(6)
});
google.maps.event.addListener(map, 'click', function(event) {
document.getElementById('mapclicked').value = document.getElementById('mapclicked').value event.latLng.lat().toFixed(6) ', ' event.latLng.lng().toFixed(6) '; '
});
}
var loc = [
["myTitle1", 55.9133, -4.4710, "wp"],
["myTitle2", 55.9133, -4.4719, "wp"],
["myTitle3", 55.9132, -4.4721, "wp"],
];
function setMarkers(map, loc) {
var imageWP = {
url: '../img/mapsymbols/waypoint.gif',
size: new google.maps.Size(10, 10),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(4, 4)
};
var shape2525 = {
coords: [0, 0, 0, 24, 24, 24, 24, 0],
type: 'poly'
};
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < loc.length; i ) {
var site = loc[i];
console.log(JSON.stringify(site));
var myLatLng = new google.maps.LatLng(site[1], site[2]);
switch (site[3]) {
case 'wp':
var wpmark = new google.maps.Marker({
position: myLatLng,
zIndex: i,
map: map,
// icon: imageWP,shape: shape2525,
title: site[0]
});
console.log("wpmark " wpmark.getPosition().toUrlValue(6));
bounds.extend(wpmark.getPosition());
//The problem is the next line. Remove it and the program works.
wpmark.addListener('click', function(event) {
console.log("wpmenuwindow")
wpmenuwindow.open(map, this);
});
break;
}
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#map-canvas {
height: 50%;
}<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk'>
</script>
<div class='eventtext'>Lat Long of cursor:
<div>
<input type='text' id='mm' />
</div> <br /> Coordinates of clicked points:
<div>
<textarea id='mapclicked' rows='10' cols='30'>
</textarea>
</div>
</div>
<div id="map-canvas"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/432255.html
標籤：javascript 谷歌地图