创建事件侦听器来动态创建谷歌地图标记 [英] create event listener to dynamically created google-map marker

查看：77
本文介绍了创建事件侦听器来动态创建谷歌地图标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建一个页面，我将使用vba与excel进行集成。 。点击时，我想添加事件监听器到标记。我几乎无法设法为单个标记创建一个单击侦听器，但我无法将其用于使用循环动态创建的多个标记。



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



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



这就是我（从这里到那里）。

 <！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no> 
< meta charset =utf-8> 
< title>简单标记< / title> 
< style> 
 html，body，＃map-canvas {
 height：100％; 
保证金：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; 
 
 //这将从服务器端创建
 
 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）; 
 
 
函数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：{
 //标题：34，
 // pitch：10 
 //} 
}; 
 //将初始街景相机设置为地图中心
 new google.maps.StreetViewPanorama（document.getElementById（'pano'），
 panoramaOptions）; 
 
 //这是创建标记
（标记中的索引）addMarker（markers [index]）的循环; 
函数addMarker（data）{
 //创建标记
 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 
}）; 
 
 
 
 
 $ b google.maps.event.addDomListener（window，'load'，initialize）; 
 
< / script> 
< / head> 
< body> 
< div id =map-excelstyle =width：60％; height：100％; float：left>< / div> 
< div id =panostyle =width：40％; height：50％; float：right>< / div> 
< div id =map-canvasstyle =width：40％; height：50％; float：right>< / div> 
 
< / body> 
< / html>


解决方案


  1. 全景： 





  //设置初始街景相机到地图的中心
 new google.maps.StreetViewPanorama（document.getElementById（'pano'），panoramaOptions）;

应该是： 

  //将初始Street View相机设置为地图中心
 panorama = new google.maps.StreetViewPanorama（document.getElementById（'pano'），panoramaOptions）;




  1. 更改<$ c $的位置c> panorama 在标记中点击侦听器。





  google.maps.event.addListener（marker，'click'，function（e）{
 pano.setPosition（marker.getPosition（ ））; 
}）;

概念证明小提琴



代码段： 

  var labels ='ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // mevar labelIndex = 0; // mevar map; var panorama; //这将从服务器端创建sidevar 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 //}}; //将初始街景相机设置为地图中心pano = new google.maps.StreetViewPanorama（document.getElementById（'pano'），panoramaOptions）; //这是创建标记的循环（标记中的var索引）addMarker（markers [index]）;函数addMarker（数据）{//创建标记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％;保证金：0; padding：0;}

< script src =https ：//maps.googleapis.com/maps/api/js>< / script>< div id =map-excelstyle =width：60％; height：100％; float：left> ;< / div>< div id =panostyle =width：40％; height：50％; float：right>< / div>< div id =map-canvasstyle = width：40％; height：50％; float：right>< / div>

$ b

I am trying to create a page that I am going to integrate with excel with vba. . I want to add event Listener to marker when it is clicked. I can barely manage to create a "click listener" to single marker ,but I couldn't do it to multiple markers that are created dynamically using a loop.

When the marker is clicked, I want the street view to update to the new clicked marker's position.

I really appreciate any suggestion. Thank you.

This is what I have(from here and there).

<!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. keep a reference to the panorama:

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

should be:

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

  1. Change the location of the panorama in the marker click listener.

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

proof of concept fiddle

code snippet:

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>

这篇关于创建事件侦听器来动态创建谷歌地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆