堆棧內存溢出
  簡體   English   中英

獲取 Google 地圖中的 Clicked 標記並將其發送給函數

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

 原文  2016-12-30 14:29:18  8   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