点击Google地图时会显示多个地理编码位置和提醒 [英] Google Maps with multiple geocode locations and alerts on click
问题描述
最后，地点和地点的内容将会动态生成，但现在，我只是试图让它使用静态内容。
我的地图点正确显示，但是，我遇到了警报问题不会出现增量变量。
据我所知，locationContent [i] [0]中的var [i]不会被数字取代。
例如，当我用locationContent [0] [1]替换代码时，它将返回alert1（在所有3个标记上）。
http://jsfiddle.net/rum0gxtw/1 /
我需要增加它，因此它会为相应标记返回alert1，alert2，alert3。
我一直在盯着代码几个小时，试图解决它的各种问题。我想我只是缺少一些基本的东西。这是我的代码：
$ pre $ $ $ $ $ $
['Durham School'，'DH1 4SZ']，
['牛津大学'，'OX4 1EQ']，
];
//提示内容
var locationContent = [
['wow1'，'alert1']，
['wow2'，'alert2']，
['wow3'，'alert3']
];
var image ='icon.png';
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：7，
center：new google.maps.LatLng（43.253205，-80.480347） ，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var geocoder = new google.maps.Geocoder（）; （i = 0; i< locations.length; i ++）{
geocoder.geocode（{'address'：locations [i] [1]}的
，函数（结果，状态）{
// alert（status）;
if（status == google.maps.GeocoderStatus.OK）{
// alert（results [ 0] .geometry.location）;
map.setCenter（results [0] .geometry.location）;
marker = new google.maps.Marker（{
position：results [0] .geometry.location，
icon：image，
map：map
}）;
google.maps.event.addListener（marker，'click'，（函数（i）{
return function（）{
alert（locationContent [i] [1]）;
}
}）（i））;
}
else
{
alert（geocode中的一些问题+状态）;
}
}）;
}
如果有人可以帮我解决这个问题，我将非常感激。
谢谢。
地理编码是异步的。当循环结束时i = locations.length;这是所有的地理编码回调运行时。
在地理编码器上使用 i 的匿名函数关闭，以及标记点击事件处理程序：
pre $ for（i = 0; i< locations.length; i ++）{
geocoder.geocode（{$ b $'address'：locations [i] [1]
}，（function（i）{
return function（results，status）{
if（状态== google.maps.GeocoderStatus.OK）{
map.setCenter（results [0] .geometry.location）;
marker = new google.maps.Marker（{
position： results [0] .geometry.location，
icon：image，
map：map
}）;
google.maps.event.addListener（marker，'click'，（函数（marker，i）{
return function（）{
alert（locationContent [i] [1]）;
};
}）（marker，i））;
}其他{
alert（geocode中的一些问题+ status）;
}
};
}）（i））;
}
代码片段：
function initialize（）{var locations = [['Loughbourough University'，'LE11 3TU']，['Durham School'，'DH1 4SZ']，['Oxford University'，'OX4 1EQ']]; //警报内容var locationContent = [['wow1'，'alert1']，['wow2'，'alert2']，['wow3'，'alert3']]; // var image ='icon.png'; var map = new google.maps.Map（document.getElementById（'map'），{zoom：7，center：new google.maps.LatLng（43.253205，-80.480347），mapTypeId：google.maps.MapTypeId.ROADMAP}） ; var geocoder = new google.maps.Geocoder（）;对于（i = 0; i< locations.length; i ++）{geocoder.geocode（{'address'：locations [i] [1]}，（function（i）{return function（results，status）{ alert（status）; if（status == google.maps.GeocoderStatus.OK）{//alert (results[0].geometry.location）; map.setCenter（results [0] .geometry.location）; marker = new google.maps.Marker（{position：results [0] .geometry.location，// icon：image，map：map}）; google.maps.event.addListener（marker，'click'，（function（marker，i ）{return function（）{alert（locationContent [i] [1]）;};}）（marker，i））;} else {alert（geocode中的一些问题+ status）;}};}）（一世））; }} google.maps.event.addDomListener（window，'load'，initialize）;
html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//
I am trying to create a Google Map with multiple geocode locations and a unique alert for each location.
Eventually, the locations and locations content will be dynamically generated, but right now, I am just trying to get it working with static content.
My map points are appearing properly, however, I am having a problem with the alerts which will not appear with the incrementing variable in place.
As far as I can tell, the var [i] in locationContent[i][0] is not being replaced with a number.
When I replace the code with locationContent[0][1] for example, it returns alert1 (on all 3 markers).
http://jsfiddle.net/rum0gxtw/1/
I need it to increment so it returns alert1, alert2, alert3 for the respective marker.
I've been staring at the code for hours now trying various things to solve it. I think I am just missing something fundamental. Here is my code:
var locations = [
['Loughbourough University', 'LE11 3TU'],
['Durham School', 'DH1 4SZ'],
['Oxford University', 'OX4 1EQ'],
];
// Alert Content
var locationContent = [
['wow1', 'alert1'],
['wow2', 'alert2'],
['wow3', 'alert3']
];
var image = 'icon.png';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(43.253205,-80.480347),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
geocoder.geocode( { 'address': locations[i][1]}, function(results, status) {
//alert(status);
if (status == google.maps.GeocoderStatus.OK) {
//alert(results[0].geometry.location);
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
position: results[0].geometry.location,
icon: image,
map: map
});
google.maps.event.addListener(marker, 'click', (function(i) {
return function() {
alert(locationContent[i][1]);
}
})(i));
}
else
{
alert("some problem in geocode" + status);
}
});
}
Would highly appreciate if someone could help me out with this.
Thanks.
Geocoding is asynchronous. When the loop ends i=locations.length; which is when all the geocoding callbacks run.
Use anonymous function closure on i for the geocoder, as well as the marker click event handler:
for (i = 0; i < locations.length; i++) {
geocoder.geocode({
'address': locations[i][1]
}, (function(i) {
return function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
position: results[0].geometry.location,
icon: image,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
alert(locationContent[i][1]);
};
})(marker, i));
} else {
alert("some problem in geocode" + status);
}
};
})(i));
}
code snippet:
function initialize() {
var locations = [
['Loughbourough University', 'LE11 3TU'],
['Durham School', 'DH1 4SZ'],
['Oxford University', 'OX4 1EQ']
];
// Alert Content
var locationContent = [
['wow1', 'alert1'],
['wow2', 'alert2'],
['wow3', 'alert3']
];
// var image = 'icon.png';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(43.253205, -80.480347),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
geocoder.geocode({
'address': locations[i][1]
}, (function(i) {
return function(results, status) {
//alert(status);
if (status == google.maps.GeocoderStatus.OK) {
//alert(results[0].geometry.location);
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
position: results[0].geometry.location,
// icon: image,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
alert(locationContent[i][1]);
};
})(marker, i));
} else {
alert("some problem in geocode" + status);
}
};
})(i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
这篇关于点击Google地图时会显示多个地理编码位置和提醒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
