Google Maps API InfoWindow仅显示所有标记的第一个位置 [英] Google Maps API InfoWindow only showing the first location for all the markers
本文介绍了Google Maps API InfoWindow仅显示所有标记的第一个位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在玩谷歌地图API添加多个标记和风格。我有这一切工作正常，但我无法工作的是每个标记的InfoWindow。我设法让InfoWindow工作一点，但它只显示所有标记的第一个位置/地址。
只需注意地址/位置将被添加使用CMS系统，不会手动添加。
以下是我一直在使用的代码：
$（document）.ready（function（）{
var map;
var elevator;
var myOptions = {
zoom：3 ，
center：new google.maps.LatLng（50，-30），
mapTypeId：'terrain'
};
map = new google.maps。 Map（$（'＃map_canvas'）[0]，myOptions）;
var styles = [{featureType：water，stylers：[{color：＃46bcec }，{ 可见性 ： 上 }]}，{ 类型特征 ： 风景， 造型器：[{ 颜色： ＃f2f2f2}]}，{ 类型特征： 路 造型器：[{ 饱和： - 100}，{ 亮度：45}]}，{ 类型特征： road.highway， 造型器：[{ 可视性： 简化} ]}，{ 类型特征： road.arterial， 的ElementType：labels.icon ， 造型器：[{ 可视性： 关}]}，{ 类型特征： 行政， 的ElementType： labels.text.fill， 造型器：[{ 颜色： ＃444444}]}，{ 类型特征： 运输， 造型器：[{ 可视性： 关}]}，{ 类型特征： POI， 造型器：[{能见度 ： 关}]}];
map.setOptions（{styles：styles}）;
var addresses = ['10007'，'75008'，'28008'，'21465'，'SE91AA'，];
（var x = 0; x
var p = data.results [0] .geometry.location
var latlng = new google.maps.LatLng（p.lat，p.lng）;
var pinColor =academia.png;
var pinImage = new google.maps.MarkerImage（/ assets /images/pin-green.png，
new google.maps.Size（22，31））;
var contentString ='< div>'+ addresses [0] + '< / div>';
var marker = new google.maps.Marker（{
位置：latlng，
map：map，
clickable：true，
icon：pinImage，
title：addresses [0]，
}）;
google.maps.event.addListener（marker，'点击'，getInfoCallback（map，c ontentString））;
}）;
$ b函数getInfoCallback（map，content）{
var infowindow = new google.maps.InfoWindow（{content：content}）;
返回函数（）{
infowindow.setContent（content）;
infowindow.open（map，this）;
};
}
}
解决方案
除 adresses [i] （我用 i 代替 x ）我在返回的JSON中添加了 formatted_address 。
$（document）.ready（function（ ）{
var map;
var elevator;
var myOptions = {
zoom：3，
center：new google.maps.LatLng（50，-30） ，
mapTypeId：'terrain'
};
map = new google.maps.Map（$（'＃map_canvas'）[0]，myOptions）;
var styles = [{featureType：water，stylers：[{color：＃46bcec}，{visibility：on}]}，{featureType ：风景，stylers：[{color：＃f2f2f2}]}，{featureType：road，stylers：[{saturation：-100}，{lightness ：featureType：road.highway，stylers：[{visibility：simplified}]}，{featureType：road.arterial，elementType： label.icon，stylers：[{visibility：off}]}，{featureType：administrative，elementType：labels.text.fill，stylers：[{颜色：＃44444 4}]}，{featureType：transit，stylers：[{visibility：off}]}，{featureType：poi，stylers：[{ ：off}]}];
map.setOptions（{styles：styles}）;
var iterator = 0;
var addresses = ['10007'，'75008'，'28008'，'21465'，'SE91AA'];
for（var i = 0; i< addresses.length; i ++）{
MarkMe（）;
函数MarkMe（）{
var add = addresses [iterator];
$ .getJSON（'http://maps.googleapis.com/maps/api/geocode/json?address='+ add +'& sensor = false'，null，function（data）{
var p = data.results [0] .geometry.location
var o = data.results [0] .formatted_address
var latlng = new google.maps.LatLng（p.lat， lng）;
var pinColor =academia.png;
var pinImage = new google.maps.MarkerImage（/ images / pin-green.png，
new google.maps。大小（22,31））;
var content ='< div style =width：150px;>'+ o +'< br />'+ add +'< ; / div>';
var marker = new google.maps.Marker（{
position：latlng，
map：map，
clickable：true，
icon：pinImage，
title：o +'< br />'+ add，
}）;
function getInfoCallback（map，content）{
var infowindow = new google.maps.InfoWindow（{content：content}）;
返回函数（）{
infowindow.setContent（content）;
infowindow.open（map，this）;
};
};
google.maps.event.addListener（marker，'click'，getInfoCallback（map，content））;
}）;
iterator ++;
}
}）
它在我身边工作，你希望..希望我帮助..
I have been playing about with the Google maps api adding multiple markers and style. I have this all working ok but what I cant get to work is the InfoWindow for each marker. I have managed to get the InfoWindow working a bit but it only shows the first location/address for all the markers.
Just to note that the address/locations will be added using a CMS system and wont be manually added.
Below is the code that i have been working with:
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(50, -30),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var styles = [{"featureType":"water","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"landscape","stylers":[{"color":"#f2f2f2"}]},{"featureType":"road","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]}];
map.setOptions({styles: styles});
var addresses = [ '10007','75008','28008','21465','SE91AA',];
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 pinColor = "academia.png";
var pinImage = new google.maps.MarkerImage("/assets/images/pin-green.png",
new google.maps.Size(22, 31));
var contentString = '<div>'+ addresses[0] +'</div>';
var marker = new google.maps.Marker({
position: latlng,
map: map,
clickable: true,
icon: pinImage,
title: addresses[0],
});
google.maps.event.addListener(marker, 'click', getInfoCallback(map, contentString));
});
}
function getInfoCallback(map, content) {
var infowindow = new google.maps.InfoWindow({content: content});
return function() {
infowindow.setContent(content);
infowindow.open(map, this);
};
}
}
解决方案
Along with adresses[i] (I used i instead of x) I added formatted_address from the returning JSON. Such parts are just added while I am playing around.. refer the below code:
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(50, -30),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var styles = [{ "featureType": "water", "stylers": [{ "color": "#46bcec" }, { "visibility": "on" }] }, { "featureType": "landscape", "stylers": [{ "color": "#f2f2f2" }] }, { "featureType": "road", "stylers": [{ "saturation": -100 }, { "lightness": 45 }] }, { "featureType": "road.highway", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{ "color": "#444444" }] }, { "featureType": "transit", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi", "stylers": [{ "visibility": "off" }] }];
map.setOptions({ styles: styles });
var iterator = 0;
var addresses = ['10007', '75008', '28008', '21465', 'SE91AA'];
for (var i = 0; i < addresses.length; i++) {
MarkMe();
}
function MarkMe() {
var add = addresses[iterator];
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + add + '&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var o = data.results[0].formatted_address
var latlng = new google.maps.LatLng(p.lat, p.lng);
var pinColor = "academia.png";
var pinImage = new google.maps.MarkerImage("/images/pin-green.png",
new google.maps.Size(22, 31));
var content = '<div style="width: 150px;">' + o + '<br/>' + add + '</div>';
var marker = new google.maps.Marker({
position: latlng,
map: map,
clickable: true,
icon: pinImage,
title: o + '<br/>' + add,
});
function getInfoCallback(map, content) {
var infowindow = new google.maps.InfoWindow({ content: content });
return function () {
infowindow.setContent(content);
infowindow.open(map, this);
};
};
google.maps.event.addListener(marker, 'click', getInfoCallback(map, content));
});
iterator++;
}
})
It is working on my side, just customize as you wish.. Hope I helped..
这篇关于Google Maps API InfoWindow仅显示所有标记的第一个位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
