谷歌地图标记位置错误 [英] Google maps marker wrong position
本文介绍了谷歌地图标记位置错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在地图上有多个标记.但是它不会将相应的infoWindows附加到标记.它们始终位于左上角.不知道这里有什么干扰.
var geocoder = new google.maps.Geocoder();
var addresses = [
'Marienstr. 37a 27472 Cuxhaven',
'Bahnhofstr. 15 21745 Hemmoor',
'Richtpfad 20 26506 Norden',
'Eulenbusch 4 21391 Reppenstedt'
];
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i=0; i < addresses.length; i++) {
geocoder.geocode( { 'address': addresses[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(addresses[i]);
infowindow.open(map, marker);
};
})(marker, i));
bounds.extend(results[0].geometry.location);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
解决方案
在这里失败(正如MrUpsidown所观察到的)infowindow.setContent(addresses[i]);，因为单击侦听器运行i = 4且地址[4]不存在. >
解决问题的一种方法是对地址解析功能以及标记(在下面)使用功能闭包.但是正如MrUpsidown所说，如果您有大约10个以上的地址，它将无法使用.
function geocodeAddress(addresses, i) {
geocoder.geocode( { 'address' : addresses[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(addresses[i]);
infowindow.open(map, marker);
};
})(marker, i));
bounds.extend(results[0].geometry.location);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
工作代码段:
function geocodeAddress(addresses, i) {
geocoder.geocode( { 'address' : addresses[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(addresses[i]);
infowindow.open(map, marker);
};
})(marker, i));
bounds.extend(results[0].geometry.location);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
var geocoder = new google.maps.Geocoder();
var addresses = [
'Marienstr. 37a 27472 Cuxhaven',
'Bahnhofstr. 15 21745 Hemmoor',
'Richtpfad 20 26506 Norden',
'Eulenbusch 4 21391 Reppenstedt'
];
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i=0; i < addresses.length; i++) {
geocodeAddress(addresses,i);
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map" style="width: 500px; height: 400px;"></div>
I've got multiple markers on a map. But it won't attach the corresponding infoWindows to the marker. They are always in the upper left corner. Don't know what's interfering here.
var geocoder = new google.maps.Geocoder();
var addresses = [
'Marienstr. 37a 27472 Cuxhaven',
'Bahnhofstr. 15 21745 Hemmoor',
'Richtpfad 20 26506 Norden',
'Eulenbusch 4 21391 Reppenstedt'
];
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i=0; i < addresses.length; i++) {
geocoder.geocode( { 'address': addresses[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(addresses[i]);
infowindow.open(map, marker);
};
})(marker, i));
bounds.extend(results[0].geometry.location);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
解决方案
it is failing here (as MrUpsidown observed) infowindow.setContent(addresses[i]); because when the click listener runs i=4 and addresses[4] doesn't exist.
One way to solve your problem is to use function closure on the geocode function as well as the marker (below). But again as MrUpsidown observes, if you have more than about 10 addresses, it won't work.
function geocodeAddress(addresses, i) {
geocoder.geocode( { 'address' : addresses[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(addresses[i]);
infowindow.open(map, marker);
};
})(marker, i));
bounds.extend(results[0].geometry.location);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
Working code snippet:
function geocodeAddress(addresses, i) {
geocoder.geocode( { 'address' : addresses[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(addresses[i]);
infowindow.open(map, marker);
};
})(marker, i));
bounds.extend(results[0].geometry.location);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
var geocoder = new google.maps.Geocoder();
var addresses = [
'Marienstr. 37a 27472 Cuxhaven',
'Bahnhofstr. 15 21745 Hemmoor',
'Richtpfad 20 26506 Norden',
'Eulenbusch 4 21391 Reppenstedt'
];
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i=0; i < addresses.length; i++) {
geocodeAddress(addresses,i);
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map" style="width: 500px; height: 400px;"></div>
这篇关于谷歌地图标记位置错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
