Google Maps API V3使用邮政编码地理编码进行多个标记

Question

I'm currently trying to make a multiple marker google map on my webpage but trying to get the locations of each marker from the postcode. 我目前正在尝试在网页上制作多个标记的google map，但尝试从邮政编码中获取每个标记的位置。 I have found code for the markers and code for the postcode geocode but I cant seem to find a way to stick them together. 我已经找到了标记的代码和邮政编码地理代码的代码，但是我似乎找不到找到将它们组合在一起的方法。

The multiple marker code I have : 我有多个标记代码：

  <script type="text/javascript">
  var locations = [
  ['Chester', 53.183497, -2.890605, 3, 'https://www.google.co.uk'],
  ['Manchester', 53.474103, -2.243593, 2, 'https://www.google.co.uk'],
  ['Liverpool', 53.421206, -2.945146, 1, 'https://www.google.co.uk/']
  ];


var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 9,
  center: new google.maps.LatLng(53.381021, -2.608138),
  mapTypeId: google.maps.MapTypeId.TERRAIN,

});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    url: locations[i][4],
    map: map
  });

    google.maps.event.addListener(marker, 'dblclick', function() {
            window.location.href = this.url;
        });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
</script>

postcode geocode code I have : 我的邮政编码地理编码：

  <html>
  <head>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript"></script>
  </head>
  <body onload="initialize()">
  <div align="center" style="height: 30px; width: 530px">
  <input id="address" type="textbox">
  <input type="button" value="Geocode" onclick="codeAddress()">
  </div>
  <div id="map" style="height:200px; width: 530px"></div>
  </body>
  </html>
  <script>
  var geocoder;
  var map;
  function initialize()
  {
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById("map"),
  {
    zoom: 8,
    center: new google.maps.LatLng(22.7964,79.5410),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  }

  function codeAddress()
  {
   var address = document.getElementById("address").value;
   geocoder.geocode( { 'address': address}, function(results, status)
   {
    if (status == google.maps.GeocoderStatus.OK)
    {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker(
        {
            map: map,
            position: results[0].geometry.location
        });
    }
    else
    {
        alert("Geocode was not successful for the following reason: " + status);
    }
  });
   }
   </script>

Answer 1

The following example shows how to utilize google.maps.Geocoder to display detailed address information including postal code: 以下示例显示了如何利用google.maps.Geocoder显示包括邮政编码的详细地址信息：

 function initMap() { var geocoder = new google.maps.Geocoder(); var locations = [ ['Chester', 53.183497, -2.890605, 3, 'https://www.google.co.uk'], ['Manchester', 53.474103, -2.243593, 2, 'https://www.google.co.uk'], ['Liverpool', 53.421206, -2.945146, 1, 'https://www.google.co.uk/'] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 9, center: new google.maps.LatLng(53.381021, -2.608138), mapTypeId: google.maps.MapTypeId.TERRAIN, }); var infowindow = new google.maps.InfoWindow(); for (var i = 0; i < locations.length; i++) { var latLng = { lat: locations[i][1], lng: locations[i][2] }; resolveAddressByLatLng(geocoder, latLng, (function(loc) { return function(result) { //console.log(location); var marker = new google.maps.Marker({ position: new google.maps.LatLng(loc[1], loc[2]), url: loc[4], map: map }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(result[0].formatted_address); infowindow.open(map, marker); }); } })(locations[i]), function(status) { console.log("Geocode was not successful for the following reason: " + status); }); } } function resolveAddressByLatLng(geocoder, latLng,success,error) { geocoder.geocode({ 'location': latLng }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { success(results); } else { error(status); } }); }

  html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }

  <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>

Answer 2

To add the markers via postcode, you need to replace the latitude/longitude coordinates in the array with the postcode, then geocode that. 要通过邮政编码添加标记，您需要用邮政编码替换数组中的纬度/经度坐标，然后对其进行地理编码。

// updated array
var locations = [
    ['Manchester', 'M3 3JU', 'https://www.google.co.uk'],
    ['Chester', 'CH1 2DY', 'https://www.google.co.uk'],
    ['Liverpool', 'L3 8EN', 'https://www.google.co.uk/']
];
// geocoding function
function codeAddress(location) {
    geocoder.geocode({
        'address': location[1]
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                title: location[1],
                url: locations[2],
                position: results[0].geometry.location
            });
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);

            google.maps.event.addListener(marker, 'dblclick', function () {
                window.location.href = this.url;
            });

            google.maps.event.addListener(marker, 'click', (function (marker, location) {
                return function () {
                    infowindow.setContent(location[0]);
                    infowindow.open(map, marker);
                };
            })(marker, location));
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

proof of concept fiddle 概念证明

code snippet: 代码段：

 var locations = [ ['Manchester', 'M3 3JU', 'https://www.google.co.uk'], ['Chester', 'CH1 2DY', 'https://www.google.co.uk'], ['Liverpool', 'L3 8EN', 'https://www.google.co.uk/'] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 9, center: new google.maps.LatLng(53.381021, -2.608138), mapTypeId: google.maps.MapTypeId.TERRAIN }); var infowindow = new google.maps.InfoWindow(); var geocoder = new google.maps.Geocoder(); var bounds = new google.maps.LatLngBounds(); var marker, i; for (i = 0; i < locations.length; i++) { codeAddress(locations[i]); } function codeAddress(location) { geocoder.geocode({ 'address': location[1] }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, title: location[1], url: locations[2], position: results[0].geometry.location }); bounds.extend(marker.getPosition()); map.fitBounds(bounds); google.maps.event.addListener(marker, 'dblclick', function() { window.location.href = this.url; }); google.maps.event.addListener(marker, 'click', (function(marker, location) { return function() { infowindow.setContent(location[0]); infowindow.open(map, marker); }; })(marker, location)); } else { alert("Geocode was not successful for the following reason: " + status); } }); }

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>

Google Maps API V3使用邮政编码地理编码进行多个标记

问题描述

2 个解决方案

解决方案1
0 2015-10-14 11:32:07

解决方案2
0 2015-10-14 13:11:09

Google Maps API V3使用邮政编码地理编码进行多个标记

问题描述

2 个解决方案

解决方案1 0 2015-10-14 11:32:07

解决方案2 0 2015-10-14 13:11:09

解决方案1
0 2015-10-14 11:32:07

解决方案2
0 2015-10-14 13:11:09