向 Google 地图添加新的点击侦听器时出错。地图由 PHP 创建的 JS 创建

Question

Google 地图显示一系列 waypoints，连接起来形成一条路线。 Waypoint 只是一个红色的小圆圈。还有其他几个标记：名胜古迹、交通线路等，与这里没有直接关系。所有 waypoints 等都从 MySQL 数据库中检索。除了我称之为 wpmark 的 waypoints 之外，所有标记都称为标记。

我有一个显示连续 LatLong 的 mousemove 侦听器和一个将地图单击的 LatLong 添加到文本框的点击侦听器。该脚本是 php，它使用 MySQL 数据库写入 JavaScript。该代码是 JavaScript，简化后删除了数百个 waypoints 和其他所有其他类型的标记。

我想为每个航路点添加一个点击侦听器，并在附近打开一个 window，我可以在其中添加菜单。地图工作得很好，直到我添加了在地图根本不显示时添加新侦听器的尝试。

我尝试了多种格式的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>

Answer 1

有两种语法可用于将点击侦听器添加到标记。 google.maps.MVCObject.addListener（标记是 MVCObject）和 google.maps.event.addListener（将“实例”/google.maps.Marker 作为第一个参数）。

google.maps.wpmark.addListener(wpmark, 'click', function(event){...}); 两者都不是。

或者：

wpmark.addListener('click', function(event) {
  wpmenuwindow.open(map, this);
});

或

google.maps.event.addListener(wpmark, 'click', function(event) {
  wpmenuwindow.open(map, this);
});

将起作用（如果 wpmenuwindow 在正确的范围内可用。

proof of concept fiddle

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>

向 Google 地图添加新的点击侦听器时出错。地图由 PHP 创建的 JS 创建

Error in adding a new click listener to Google Maps. Map is created by JS created by PHP

javascript

google-maps