创建事件侦听器以动态创建谷歌地图标记答案

【问题标题】：create event listener to dynamically created google-map marker创建事件侦听器以动态创建谷歌地图标记
【发布时间】：2015-10-31 14:10:39
【问题描述】：

我正在尝试创建一个页面，该页面将与 excel 和 vba 集成。 .我想在单击时将事件侦听器添加到标记。我几乎无法为单个标记创建“点击侦听器”，但我无法对使用循环动态创建的多个标记执行此操作。

单击标记时，我希望街景更新到新单击标记的位置。

我非常感谢任何建议。谢谢。

这就是我所拥有的（从这里到那里）。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0;
        padding: 0;
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>


var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; //me
var labelIndex = 0;                        //me
var map;
var panorama;

//this will be created from server side

    var markers = [
  { lat: 39.976784, lng: -75.234347, name: "marker 1" },
  { lat: 39.977043, lng: -75.235087, name: "marker 2" },
  { lat: 39.976097, lng: -75.234508, name: "marker 3" },
  { lat: 39.977059, lng: -75.233682, name: "marker 4" }
];
var myLatlng = new google.maps.LatLng(markers[0].lat,markers[0].lng);


function initialize() {
//var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));  


var mapOptions = {
  zoom: 16,
  center: myLatlng
 }
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {

    navigationControl: true,
    position: myLatlng,
    //pov: {
    //heading: 34,
    //pitch: 10
    //}
};
// Set the initial Street View camera to the center of the map
new google.maps.StreetViewPanorama(document.getElementById('pano'),       
panoramaOptions);

//this is the loop that will creat the marker
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
  // Create the marker
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(data.lat, data.lng),
    map: map,
    label: labels[labelIndex++ % labels.length],
    title: data.name
  });

}

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-excel" style="width: 60%; height: 100%;float:left"></div>
<div id="pano" style="width: 40%; height: 50%;float:right"></div>
<div id="map-canvas" style="width: 40%; height: 50%;float:right"></div>

</body>
</html>

【问题讨论】：

您希望街景指向哪个方向？您的标记点击监听器在哪里？

标签： javascript google-maps google-maps-api-3 google-street-view

【解决方案1】：

// 将此代码包含到您的循环中

var infowindow = new google.maps.InfoWindow({
    content: 'info content'
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

【讨论】：

这与我的问题没有直接关系，但感谢您的快速响应。

【解决方案2】：

在您的函数中 (function(data){....})(data); 因为您使用标记数组。

function addMarker(data) {
  (function(data){   <<-- New line added 
  // Create the marker
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(data.lat, data.lng),
    map: map,
    label: labels[labelIndex++ % labels.length],
    title: data.name
  });

  google.maps.event.addListener(marker, 'click', function(){// <<---- New line added
       // Code event listener .... 
  });// <<---- New line added

  })(data); // <<---- New line added
}

【讨论】：

非常感谢。你的方法也有效。但是 geozipcode 更好更干净。这是我拉它的方法。 google.maps.event.addListener(marker, 'click', function(){ var paneOptions = { position: new google.maps.LatLng(data.lat, data.lng) } new google.maps.StreetViewPanorama(document.getElementById ('pano'), 全景选项);

【解决方案3】：

保留对全景图的引用：

// Set the initial Street View camera to the center of the map
new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);

应该是：

// Set the initial Street View camera to the center of the map
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);

更改panorama 在marker 点击监听器中的位置。

google.maps.event.addListener(marker,'click', function(e) {
   pano.setPosition(marker.getPosition());
});

proof of concept fiddle

代码 sn-p：

var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; //me
var labelIndex = 0; //me
var map;
var panorama;

//this will be created from server side

var markers = [{
  lat: 39.976784,
  lng: -75.234347,
  name: "marker 1"
}, {
  lat: 39.977043,
  lng: -75.235087,
  name: "marker 2"
}, {
  lat: 39.976097,
  lng: -75.234508,
  name: "marker 3"
}, {
  lat: 39.977059,
  lng: -75.233682,
  name: "marker 4"
}];
var myLatlng = new google.maps.LatLng(markers[0].lat, markers[0].lng);


function initialize() {
  //var sv = new google.maps.StreetViewService();
  panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));


  var mapOptions = {
    zoom: 16,
    center: myLatlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var panoramaOptions = {

    navigationControl: true,
    position: myLatlng,
    //pov: {
    //heading: 34,
    //pitch: 10
    //}
  };
  // Set the initial Street View camera to the center of the map
  pano = new google.maps.StreetViewPanorama(document.getElementById('pano'),
    panoramaOptions);

  //this is the loop that will creat the marker
  for (var index in markers) addMarker(markers[index]);

  function addMarker(data) {
    // Create the marker
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(data.lat, data.lng),
      map: map,
      label: labels[labelIndex++ % labels.length],
      title: data.name
    });
    google.maps.event.addListener(marker, 'click', function(e) {
      pano.setPosition(marker.getPosition());
    });
  }

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-excel" style="width: 60%; height: 100%;float:left"></div>
<div id="pano" style="width: 40%; height: 50%;float:right"></div>
<div id="map-canvas" style="width: 40%; height: 50%;float:right"></div>

【讨论】：