为动态创建的google地图标记创建事件侦听器

create event listener to dynamically created google-map marker

本文关键字：创建 事件 图标 侦听器 google 动态 地图      更新时间：2023-09-26

我试图创建一个页面，我要与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>
  1. 保留对全景图的引用:
// 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());
});

    概念验证

    代码片段:

    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>

    在你的函数这里(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
}

    查看更多示例:https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

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

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