0

我目前正在嘗試在我的網頁上製作多個標記谷歌地圖,但試圖從郵政編碼獲取每個標記的位置。我發現代碼爲郵政編碼地理編碼的標記和代碼,但我似乎找不到一種方法將它們粘在一起。使用Google地圖API V3的多個標記使用郵政編碼地址代碼

多重標記碼我有:

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

郵政編碼地址解析代碼我有:

<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> 
+0

你的代碼已經有位置座標,爲什麼你認爲你需要的地理編碼器?您嘗試進行地理編碼的郵編是什麼? (**注意**:地理編碼器受限於配額和速率限制,在您需要處理之前,它只能用於〜10個地點)。 – geocodezip

+0

我知道代碼已經有了座標,但如果只是一個郵政編碼,那麼它會更容易添加,然後如果我必須找到經度和緯度。郵政編碼不在此代碼上,但任何郵政編碼都可以。 可以說M3 3JU,CH1 2DY和L3 8EN – Stephen

+0

可能會更容易添加更多內容,但您最多隻能添加約10個位置(因爲它使用了更多Google資源)。 – geocodezip

回答

0

下面的示例示出了如何利用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>

0

要通過郵政編碼添加標記,您需要用郵政編碼替換數組中的緯度/經度座標,然後進行地理編碼。

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

代碼片段:

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>

相關問題