Question

当用户点击地图上的任何单个标记时，我试图通过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);
            });

        });    
    }

});

Answer 1

解决问题的一种方法（地理编码器调用的地址/索引上的函数闭包，标记/单击事件处理程序的标记/索引上的函数闭包）。不确定为什么使用webservice Geocoder而不是内置的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);
    }
});

Answer 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>

使用唯一链接点击Google地图标记

2 个答案: