堆栈内存溢出
  繁体   English   中英

获取 Google 地图中的 Clicked 标记并将其发送给函数

[英]Get the Clicked marker in Google maps and send it to a function

 原文  2016-12-30 14:29:18  0   2    javascript/ google-maps/ google-maps-api-3

问题描述

我试图为约旦的城市制作谷歌地图，当点击标记时，它会向用户显示有关城市的信息

我的问题是当我尝试获取用户单击的标记时，它总是发送 For 循环中的最后一个标记来实例化标记并提供信息

for 循环工作将为每个标记赋予其自己的标题、标签，并为每个标记提供一个事件侦听器

我怎样才能得到点击的标记？ 

 <!DOCTYPE html> <html> <head> <title>Gis Map</title> <style> .background {} p { background-color: white; } span { color: blue; } #Footer { width: 100%; height: 30px; position: relative; left: 0px; bottom: 0px; } #Footer_text { padding: 10px; color: black; background-color: #5B1B14; } #Fixed { position: fixed; top: 0px; left: 0px; height: 70px; width: 100%; z-index: 3; background-color: #5B1B14; } #Fixed_img_c { width: 20%; height: 100%; margin: 0 auto; } #Fixed_img { height: 100%; } .paragraphs { text-align: center; z-index: 1; font-size: 20px; width: 100%; color: red; } /*************************Menu*****************************/ .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0px; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } </style> </head> <body> <div id="Fixed"> <div id="Fixed_img_c"> </div> </div> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script> <div class="container"> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="#">Something</a> <a href="#">Something</a> </div> <div id="map" style="width:100%;height:500px"></div> <script> var map; function initMap() { map = new google.maps.Map( document.getElementById('map'), { zoom: 7, center: new google.maps.LatLng(31.9, 35.8), mapTypeId: 'terrain' }); //jordan cities locations var locations = [ [31.8354533, 35.9674337], [31.186446, 35.6248844], [30.8071736, 35.5228078], [32.0522945, 35.9935951], [31.7157524, 35.7633807], [32.0321557, 35.655972], [32.3402518, 36.1527321], [32.2699656, 35.824437], [32.3415654, 35.7322292], [32.5525113, 35.81239], [30.2200923, 35.5467541], [29.5909744, 35.1750487] ] var info = [ ["Amman", 4.007256], ["Al_Karak", 316.629], ["Tafilah", 96.291], ["Zarqa ", 1.364878], ["Madaba ", 189.192], ["Balqa ", 491.709], ["Mafraq ", 549.948], ["Jerash ", 237.059], ["Ajloun ", 176.080], ["Irbid ", 1.770158], ["Ma'an", 144.083], ["Aqaba ", 188.160] ] var markers = new Array(); for (var i = 0; i < locations.length; i++) { var coords = locations[i]; var latLng = new google.maps.LatLng(coords[0], coords[1]); var marker = new google.maps.Marker({ position: latLng, map: map, label: info[i][0], title: info[i][0] }); var infowindow = new google.maps.InfoWindow({ content: info[i][1] + "" }); google.maps.event.addListener(marker, 'click', function() { openNav(); //changeText(); infowindow.open(map, marker); }); google.maps.event.addListener(map, 'click', function() { closeNav() }); } } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZInPKXBMPYpDNRGJwjGqJb6MRGog_haU&libraries=visualization&callback=initMap"> </script> <div id="Footer"> <p id="Footer_text" class="paragraphs">dufault</p> </div> </div> </body> </html>

2 个解决方案

解决方案1
 7  2016-12-30 15:31:34

您需要将信息窗口与正确的标记相关联。 一个解决方案是函数闭包，如类似问题所示： Google Maps JS API v3 - Simple Multiple Marker Example 。 对于您的代码：

google.maps.event.addListener(marker, 'click', function(marker,i) {
 return function() {
  openNav();
  //changeText();
  // set the infowindow content for this marker (the function has closure on i)
  infowindow.setContent(info[i][1]+"");
  // open the infowindow on this marker (the function has closure on marker)
  infowindow.open(map, marker);
}}(marker,i));

概念证明小提琴

代码片段： 

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } var map; function initMap() { map = new google.maps.Map( document.getElementById('map'), { zoom: 7, center: new google.maps.LatLng(31.9, 35.8), mapTypeId: 'terrain' }); //jordan cities locations var locations = [ [31.8354533, 35.9674337], [31.186446, 35.6248844], [30.8071736, 35.5228078], [32.0522945, 35.9935951], [31.7157524, 35.7633807], [32.0321557, 35.655972], [32.3402518, 36.1527321], [32.2699656, 35.824437], [32.3415654, 35.7322292], [32.5525113, 35.81239], [30.2200923, 35.5467541], [29.5909744, 35.1750487] ] var info = [ ["Amman", 4.007256], ["Al_Karak", 316.629], ["Tafilah", 96.291], ["Zarqa ", 1.364878], ["Madaba ", 189.192], ["Balqa ", 491.709], ["Mafraq ", 549.948], ["Jerash ", 237.059], ["Ajloun ", 176.080], ["Irbid ", 1.770158], ["Ma'an", 144.083], ["Aqaba ", 188.160] ] var markers = new Array(); for (var i = 0; i < locations.length; i++) { var coords = locations[i]; var latLng = new google.maps.LatLng(coords[0], coords[1]); var marker = new google.maps.Marker({ position: latLng, map: map, label: info[i][0], title: info[i][0] }); var infowindow = new google.maps.InfoWindow({ content: info[i][1] + "" }); google.maps.event.addListener(marker, 'click', function(marker, i) { return function() { openNav(); //changeText(); infowindow.setContent(info[i][1] + ""); infowindow.open(map, marker); } }(marker, i)); google.maps.event.addListener(map, 'click', function() { closeNav() }); } } google.maps.event.addDomListener(window, 'load', initMap);
 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="Fixed"> <div id="Fixed_img_c"> </div> </div> <div class="container"> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="#">Something</a> <a href="#">Something</a> </div> <div id="map" style="width:100%;height:500px"></div> <div id="Footer"> <p id="Footer_text" class="paragraphs">dufault</p> </div>

解决方案2
 2  2016-12-30 14:42:37

尝试将侦听器放在函数中并传递您需要的值

  var myFunctinForListener = function(aMarker, aInfoWindow) {
      google.maps.event.addListener(aMarker, 'click', function() {
          openNav();
          //changeText();
          aInfoWindow.open(map, aMarker);
        });
  }



  ....


      for (var i = 0; i < locations.length; i++) {
        var coords = locations[i];
        var latLng = new google.maps.LatLng(coords[0], coords[1]);
        var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          label: info[i][0],
          title: info[i][0]
        });

        var infowindow = new google.maps.InfoWindow({
          content: info[i][1] + ""
        });


        myFunctinForListener(marker, inforwinodow);


    .....

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 获取谷歌地图中单击标记的完整地址 在Google Maps标记数组上获取onclick函数 谷歌地图API v3，无法获得点击标记 单击按钮时移动Google Maps标记 Google地图：点击标记时切换KML 谷歌地图-功能地理编码和标记 获取前往Google Maps Marker的路线 如何使用函数参数在Google地图中找到确切的点击标记？ Google Maps API v3：将值传递给Listener function()，以便在单击标记时画一个圆圈？ Google Maps API 多边形信息窗口出现在最后点击的标记上
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM