使用独特的链接使 Google 地图标记可点击答案

【问题标题】：Make Google Maps markers clickable with unique links使用独特的链接使 Google 地图标记可点击
【发布时间】：2014-03-01 04:31:11
【问题描述】：

当用户单击地图上的任何单个标记时，我正在尝试通过 get 方法将 http 数据发送到下一页。尝试基本上只是通过 URL 发送一个唯一的数字，但现在使用我的代码它只发送数字 7（地图上的总标记数），而它应该是循环的。有什么想法吗？

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(38.50, -95.50),
        mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['Deltaville, VA', 'Grasonville, MD', 'Kemah, TX', 'Vancouver, BC', 'Stuart, FL', 'Manitowoc, WI', 'Alameda, CA'];

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });

            google.maps.event.addListener(marker, 'click', function() {
               window.open("http://myurl.com/map.php?dealer=" + x);
            });

        });    
    }

});

【问题讨论】：

常见问题（FAQ），见此函数闭包示例stackoverflow.com/questions/3059044/…

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

解决问题的一种方法（地址/索引上的函数关闭用于地理编码器调用，标记/索引上的函数关闭用于标记/单击事件处理程序）。不知道您为什么使用网络服务地理编码器而不是内置的Google Maps Javascript API v3 Geocoding service

function createMarker(latlng,index, map) {
    var marker = new google.maps.Marker({
         position: latlng,
         map: map
     });

     google.maps.event.addListener(marker, 'click', function() {
        window.open("http://myurl.com/map.php?dealer=" + index);
     });
  return marker;
}
function geocodeAddress(address, index, map){
  $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+address+'&sensor=false', null, function (data) {
      var p = data.results[0].geometry.location
      var latlng = new google.maps.LatLng(p.lat, p.lng);
      createMarker(latlng, index, map);
  });    
}
$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(38.50, -95.50),
        mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['Deltaville, VA', 'Grasonville, MD', 'Kemah, TX', 'Vancouver, BC', 'Stuart, FL', 'Manitowoc, WI', 'Alameda, CA'];

    for (var x = 0; x < addresses.length; x++) {
      geocodeAddress(addresses[x],x,map);
    }
});

【讨论】：

【解决方案2】：

这里是如何使标记可点击的基础知识；

<!DOCTYPE html>
<html>
<head>
<title>Simple Click Events</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
  src="https://maps.googleapis.com/maps/api/js? 
  key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
  defer
></script>
<style type="text/css">
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }

  /* Optional: Makes the sample page fill the window. */
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
 </style>
 <script>
  function initMap() {
      const myLatlng = { lat: -25.363, lng: 131.044 };
      const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: myLatlng,
    });
    const marker = new google.maps.Marker({
       position: myLatlng,
       map,
       title: "Click to zoom",
    });
    map.addListener("center_changed", () => {
      // 3 seconds after the center of the map has changed, pan back to the
      // marker.
      window.setTimeout(() => {
        map.panTo(marker.getPosition());
      }, 3000);
    });
    marker.addListener("click", () => {
      map.setZoom(8);
      map.setCenter(marker.getPosition());
    });
  }
 </script>
 </head>
 <body>
 <div id="map"></div>
 </body>
 </html>

【讨论】：