Google Maps API地理编码多个地点
[英] Google Maps API Geocoding Multiple Locations
本文介绍了Google Maps API地理编码多个地点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经设置了一些js代码来对某些位置和地点进行地理编码，而不是在地图上进行地理编码。我可以轻松地完成一个位置，但我无法在两个位置上工作。我的工作代码位于下方，但仅适用于一个位置。
var geocoder = new google.maps.Geocoder（）;
var address =Melbourne;
geocoder.geocode（{'address'：address}，function（results，status）{
var latitude = results [0] .geometry.location.lat（） ;
var longitude = results [0] .geometry.location.lng（）;
初始化（经度，纬度）;
}） ;
函数初始化（经度，纬度）{
var latlng1 = new google.maps.LatLng（纬度，经度）;
var myOptions = {
zoom：2，
panControl：false，
zoomControl：false，
mapTypeControl：false，
streetViewControl： false，
center：latlng1，
mapTypeId：google.maps.MapTypeId.ROADMAP，
mapTypeControl：false，
scrollwheel：false，
};
var map = new google.maps.Map（document.getElementById（google-container），myOptions）;
var marker = new google.maps.Marker（{
position：latlng1，
map：map，
}）;
}
我试着在下面添加第二个，但我明显缺少有些事情。正如你可能猜测我是JavaScript新手。
var geocoder = new google.maps.Geocoder（）;
var address =Seoul;
var address2 =墨尔本;
geocoder.geocode（{'address'：address}，function（results，status）{
var latitude = results [0] .geometry.location.lat（） ;
var longitude = results [0] .geometry.location.lng（）;
var latitude2 = r
初始化（纬度，经度）;
}）;
geocoder.geocode（{'address'：address2}，function（results，status）{
var latitude2 = results [0] .geometry.location.lat（） ;
var longitude2 = results [0] .geometry.location.lng（）;
var latitude2 = r
初始化（纬度2，经度2）;
}）;
函数初始化（经度，纬度）{
var latlng1 = new google.maps.LatLng（纬度，经度）;
var latlng2 = new google.maps.LatLng（latitude2，longitude2）;
var myOptions = {
zoom：2，
panControl：false，
zoomControl：false，
mapTypeControl：false，
streetViewControl： false，
center：latlng1，
mapTypeId：google.maps.MapTypeId.ROADMAP，
mapTypeControl：false，
scrollwheel：false，
};
var map = new google.maps.Map（document.getElementById（google-container），myOptions）;
var marker = new google.maps.Marker（{
position：latlng1，
map：map，
}）;
var marker2 = new google.maps.Marker（{
position：latlng2，
map：map，
}）;
}
任何想法都会受到欢迎！
<解决方案此解决方案适用于两个，也许多达10个位置，然后您将开始运行查询和速度限制在 Geocoder
- 分开初始化函数只是初始化地图为每个位置创建一个唯一的地理编码器实例（您可以在回调中重复使用相同的地理编码器实例，不值得用于两点） 。
工作小提琴 a>
工作代码片段：
function initialize（）{var myOptions = {zoom：2， panControl：false，zoomControl：false，mapTypeControl：false，streetViewControl：false，center：{lat：0，lng：0}，mapTypeId：google.maps.MapTypeId.ROADMAP，mapTypeControl：false，scrollwheel：false，}; var bounds = new google.maps.LatLngBounds（）; var map = new google.maps.Map（document.getElementById（google-container），myOptions）; var geocoder = new google.maps.Geocoder（）; var address =Seoul; geocoder.geocode（{'address'：address}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{var marker = new google.maps.Marker（{position：results [0] .geometry.location，map：map，}）; bounds.extend（results [0] .geometry.location）; map.fitBounds（bounds）;} else {alert（Geocode of+ address +failed，+状态）; } }）; var geocoder2 = new google.maps.Geocoder（）; var address2 =墨尔本; geocoder2.geocode（{'address'：address2}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{var marker = new google.maps.Marker（{position：results [0] .geometry.location，map：map，}）; bounds.extend（results [0] .geometry.location）; map.fitBounds（bounds）;} else {alert（Geocode of+ address2 +failed，+状态）;}}）;} google.maps.event.addDomListener（window，'load'，initialize）;
html，body，＃google-container {height：100％;宽度：100％; margin：0px; < script src =https：//
/ code>
I've set up a little js code to geocode some locations and place than on a map. I can easily do one location, but I can't get it to work for two locations. My working code is below, but is only for one location.
var geocoder = new google.maps.Geocoder();
var address = "Melbourne";
geocoder.geocode( { 'address': address}, function(results, status) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
initialize(latitude,longitude);
});
function initialize(latitude,longitude) {
var latlng1 = new google.maps.LatLng(latitude,longitude);
var myOptions = {
zoom: 2,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl: false,
center: latlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
};
var map = new google.maps.Map(document.getElementById("google-container"),myOptions);
var marker = new google.maps.Marker({
position: latlng1,
map: map,
});
}
I've tried to add a second with the below but I am clearly missing some thing. As you may guess I am new to javascript.
var geocoder = new google.maps.Geocoder();
var address = "Seoul";
var address2 = "Melbourne";
geocoder.geocode( { 'address': address}, function(results, status) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var latitude2 = r
initialize(latitude,longitude);
});
geocoder.geocode( { 'address': address2}, function(results, status) {
var latitude2 = results[0].geometry.location.lat();
var longitude2 = results[0].geometry.location.lng();
var latitude2 = r
initialize(latitude2,longitude2);
});
function initialize(latitude,longitude) {
var latlng1 = new google.maps.LatLng(latitude,longitude);
var latlng2 = new google.maps.LatLng(latitude2,longitude2);
var myOptions = {
zoom: 2,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl: false,
center: latlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
};
var map = new google.maps.Map(document.getElementById("google-container"),myOptions);
var marker = new google.maps.Marker({
position: latlng1,
map: map,
});
var marker2 = new google.maps.Marker({
position: latlng2,
map: map,
});
}
Any ideas would be most welcome!
解决方案
This solution works for two, perhaps up to 10 locations, after that you will start running into the query and rate limits on the Geocoder
- separate out the initialize function, just initializes the map
- create a unique geocoder instance for each location (you can reuse the same geocoder instance by reusing it in the call back, not worth it for two points).
working fiddle
working code snippet:
function initialize() {
var myOptions = {
zoom: 2,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl: false,
center: {
lat: 0,
lng: 0
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
};
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("google-container"), myOptions);
var geocoder = new google.maps.Geocoder();
var address = "Seoul";
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
});
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode of " + address + " failed," + status);
}
});
var geocoder2 = new google.maps.Geocoder();
var address2 = "Melbourne";
geocoder2.geocode({
'address': address2
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
});
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode of " + address2 + " failed," + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #google-container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="google-container" style="border: 2px solid #3872ac;"></div>
这篇关于Google Maps API地理编码多个地点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
