使用Google Maps JavaScript API v3和Geocoding API映射多个位置
Mapping multiple locations with Google Maps JavaScript API v3 and Geocoding API
我正在使用Google Maps JavaScript API v3生成一个具有多个位置/标记的地图。我只有这些位置的地址，没有坐标，所以我使用Geocoding API来获取坐标。
我终于让谷歌的地理编码工作起来了，所以位置标记会显示在它们应该在的地方。然而，相同的内容会显示在每个InfoWindow中。我似乎无法将位置数组传递到地理编码函数中。（顺便说一句，我还尝试为地理编码结果创建一个变量，并将infoWindow函数移动到地理编码函数的之外，但我也无法做到这一点。）
我已经尝试了一百种不同的方法。我希望其他人能看到我没能看到的东西。
var locations = [
['Location 1 Name', 'Location 1 Address', 'Location 1 URL'],
['Location 2 Name', 'Location 2 Address', 'Location 2 URL'],
['Location 3 Name', 'Location 3 Address', 'Location 3 URL']
];
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
title = locations[i][0];
address = locations[i][1];
url = locations[i][2];
geocoder.geocode({ 'address' : locations[i][1] }, function(results, status) {
marker = new google.maps.Marker({
icon: 'marker_blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
})
}
function infoWindow(marker, map, title, address, url) {
google.maps.event.addListener(marker, 'click', function() {
var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
iw = new google.maps.InfoWindow({ content : html, maxWidth : 350});
iw.open(map,marker);
});
}
这是谷歌地图信息窗口通过xml的多个地址的重复，只是不是完全重复。地理编码器是异步的，所以当地理编码器回调运行时，地址的值是所有调用循环结束时的值。
答案是一样的：最简单的解决方案是使用函数闭包将对地理编码器的调用与返回的结果关联起来：
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
geocoder.geocode({
'address': locations[i][1]
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
工作小提琴
代码片段：
var locations = [
['Location 1 Name', 'New York, NY', 'Location 1 URL'],
['Location 2 Name', 'Newark, NJ', 'Location 2 URL'],
['Location 3 Name', 'Philadelphia, PA', 'Location 3 URL']
];
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
geocodeAddress(locations, i);
}
}
google.maps.event.addDomListener(window, "load", initialize);
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
geocoder.geocode({
'address': locations[i][1]
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
function infoWindow(marker, map, title, address, url) {
google.maps.event.addListener(marker, 'click', function() {
var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
iw = new google.maps.InfoWindow({
content: html,
maxWidth: 350
});
iw.open(map, marker);
});
}
function createMarker(results) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
infoWindow(marker, map, title, address, url);
return marker;
}html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>步骤1
首先，你必须为它创建地图位置，比如，你想在你的网络应用程序上添加这个地图的位置。因此，首先创建JSP/HTML/ASP页面，您必须在其中创建要显示地图的位置。
<div id="map_canvas" style="width: 1350px; height: 500px"></div>
步骤2
下面我写了一个脚本，你可以使用它在你的网络应用程序上看到地图。
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=TRUEORFALSE"></script>
<script type="text/javascript">
var map;
var markers;
function initialize() {
$
.ajax({
type : "POST",
url : "Your Servlet Name", //Servlet Name
data : $("#FormID"),
success : function(responseJson) {
var result = $.parseJSON(responseJson);
markers = result;
// Below mapOptions var includes styling maps and zoom level of your map, it also includes mapTypeId.
var mapOptions = {
center : new google.maps.LatLng(
markers[0].latitude, markers[0].longitude),
zoom : 5,
scrollwheel: false,
styles : [ {
"featureType" : "administrative",
"elementType" : "labels.text.fill",
"stylers" : [ {
"color" : "#444444"
} ]
}, {
"featureType" : "landscape",
"elementType" : "all",
"stylers" : [ {
"color" : "#f2f2f2"
} ]
}, {
"featureType" : "poi",
"elementType" : "all",
"stylers" : [ {
"visibility" : "off"
} ]
}, {
"featureType" : "poi.park",
"elementType" : "geometry.fill",
"stylers" : [ {
"visibility" : "on"
}, {
"color" : "#1ba093"
} ]
}, {
"featureType" : "road",
"elementType" : "all",
"stylers" : [ {
"saturation" : -100
}, {
"lightness" : 45
} ]
}, {
"featureType" : "road.highway",
"elementType" : "all",
"stylers" : [ {
"visibility" : "simplified"
} ]
}, {
"featureType" : "road.arterial",
"elementType" : "labels.icon",
"stylers" : [ {
"visibility" : "off"
} ]
}, {
"featureType" : "transit",
"elementType" : "all",
"stylers" : [ {
"visibility" : "off"
} ]
}, {
"featureType" : "water",
"elementType" : "all",
"stylers" : [ {
"color" : "#00748c"
}, {
"visibility" : "on"
} ]
} ],
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document
.getElementById("map_canvas"), mapOptions);
addYourLocationButton(map,marker);
//Create and open InfoWindow.
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(
data.latitude, data.longitude);
var marker = new google.maps.Marker({
position : myLatlng,
animation: google.maps.Animation.DROP,
map : map,
title : //Any title that you want to display while cursor over the marker.
});
//Click event
(function(marker, data) {
google.maps.event
.addListener(
marker,
"click",
function(e) {
infoWindow
.setContent("<div style = 'width:300px;min-height:50px'>+Write information about your location if you want.+"</div>");
infoWindow
.open(map, marker);
});
})(marker, data);
}
}
});
}
function buildMapWithMultipleBuyerLocations(buyerLocations) {
const infowindow = new google.maps.InfoWindow();
const geocoder = new google.maps.Geocoder();
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(-23.5489, -46.6388),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
let latAverage = 0;
let lngAverage = 0;
buyerLocations.forEach(function(buyerLocation, index) {
geocoder.geocode({'address': buyerLocation.location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
const latitude = results[0].geometry.location.lat();
const longitude = results[0].geometry.location.lng();
// calc center of map by each
if (index === 0) {
latAverage = latitude;
lngAverage = longitude;
} else {
latAverage = ((latAverage + latitude) / 2);
lngAverage = ((lngAverage + longitude) / 2);
}
map.setCenter(new google.maps.LatLng(latAverage, lngAverage));
setLocation(map, infowindow, longitude, latitude);
}
});
});
}
function setLocation(map, infowindow, longitude, latitude) {
const marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
});
google.maps.event.addListener(
marker,
'click',
(function (marker) {
return function () {
infowindow.setContent(buyerLocation.location)
infowindow.open(map, marker)
};
})(marker)
);
}
const response = {
data: {
buyerLocations: [
{
id: 2,
location: 'Setor D Sul QSD 37 - Taguatinga, Brasília - DF, Brasil',
addressDetails: 'Casa da leia',
street: '',
zipcode: '72020-370',
city: 'Brasília',
state: 'DF',
name: 'love',
responsibleDelivery: {
name: 'Ruan Herculano',
email: 'ruannawe95@gmail.com',
phoneNumber: '(61) 98125-7366'
}
},
{
id: 1,
location: 'Setor E Sul QSE 19 - Taguatinga, Brasília - DF, Brasil',
addressDetails: '',
street: '',
zipcode: '',
city: '',
state: '',
name: 'Setor E Sul QSE 19 - Taguatinga, Brasília - DF, Brasil'
}
]
}
}
const { data } = response;
const { buyerLocations } = data;
buildMapWithMultipleBuyerLocations(buyerLocations);<script
type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTrSO0GAJbjDBLmxR3xOl-GjpNOUacrw0&libraries=places">
</script>
<div id="#map"></div>相关文章：
- 使用Google Maps JavaScript API v3和Geocoding API映射多个位置
- 使用Google'设置ID属性;s映射API
- 映射API v3标记在单击时消失
- 点击infobox-bing映射api
- 获取 API 响应对象并替换(映射）所有键
- HERE 映射 javascript API - 抛出“指针必须有 ID”错误
- 谷歌未定义(api 映射错误）
- HERE 映射 JS API v3 集群提供程序挂起，添加许多数据点
- 避免顶点拖动映射api v3
- API Google将Javascript地址映射到LatLng
- 映射API自定义可拖动方向
- 谷歌用标签映射api标记
- 在映射API中查找层渲染时间's
- 如何使用URL参数将地址传递到javascript API映射中
- 谷歌将api v2映射到v3
- 谷歌地图API:热图&搜索-无法合并到单个映射中
- IE 对象预期映射 API v3 加载外部.js函数
- 无法让 Google API 映射出现在 Javascript 中
- Angular 2 和谷歌地图 API.从组件操作映射的对象
- 如何将RESTful API映射到BackboneJS模型和集合中的URL
