[英]Dynamicaly adding InfoWindows and Markers on Google Maps V3
I am having a very annoying issue with Google Map V3 JavaScript API. 我对Google Map V3 JavaScript API有一个非常烦人的问题。 The problem might be related to my JavaScript code though. 问题可能与我的JavaScript代码有关。
Here is my complete code: 这是我的完整代码:
<script>
var __mvcGoogleMap;
var __mvcGeocoder;
var markersArray = [];
var infoWindowsArray = [];
function _initializeGoogleMap() {
__mvcGeocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(38.98569417582484, 35.351452857849154);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: false,
overviewMapControl: true
};
__mvcGoogleMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function findOnMap() {
var srchVal = $("#txtMapSearch").val();
__mvcGeocoder.geocode({'address': srchVal}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
actionURL = '/accommodation/HotelsForMap';
actionData = 'lat=' + results[0].geometry.location.lat() + '&lng=' + results[0].geometry.location.lng();
var _latLongs = [];
var _infoWindows = [];
$.ajax({
type: "POST",
url: actionURL,
data: actionData,
success: function (r) {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
for (var i = 0; i < r.length; i++) {
_latLongs.length = 0;
_infoWindows.length = 0;
_latLongs[i] = new google.maps.LatLng(r[i].LatLong.Latitude, r[i].LatLong.Longitute);
addMarker(_latLongs[i], r[i].Title);
addInfoWindow(r[i].InfoWindow.Content, markersArray[i]);
google.maps.event.addListener(markersArray[i], 'click', function() {
infoWindowsArray[i].open(__mvcGoogleMap, markersArray[i]);
});
}
var _currentPossition = results[0].geometry.location;
__mvcGoogleMap.setCenter(_currentPossition);
__mvcGoogleMap.setZoom(14);
}
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function addMarker(location, title) {
marker = new google.maps.Marker({
position: location,
title: title,
map: __mvcGoogleMap,
draggable: false
});
markersArray.push(marker);
}
function addInfoWindow(content, marker) {
infoWindow = new google.maps.InfoWindow({
content: content
});
infoWindowsArray.push(infoWindow);
}
$(function() {
$.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=_initializeGoogleMap', function() {
$(window).load(_initializeGoogleMap);
});
});
$("#btnMapSearch").click(function() {
findOnMap();
});
</script>
Here is the situation: what I am trying to do is that after I initialize the map and search for a place, I get that places LatLang values and send it to my server. 情况就是这样:我想要做的是在我初始化地图并搜索一个地方后,我得到了LatLang值并将其发送到我的服务器。 Then I get the results back from my server with some hotel info (name, lat, lang, etc). 然后我从我的服务器返回结果,其中包含一些酒店信息(name,lat,lang等)。
Then, I set the marker proper places and I attach infoWindow to each marker. 然后,我将标记设置为适当的位置,并将infoWindow附加到每个标记。 Everything works fine except for infoWindows. 除了infoWindows,一切正常。
When I click a marker, I see this error on browser console window: 单击标记时,我在浏览器控制台窗口中看到此错误:
Uncaught TypeError: Cannot call method 'open' of undefined 未捕获的TypeError:无法调用未定义的方法'open'
Can you please have a look at what I am doing wrong here? 你能看看我在这里做错了什么吗?
You will need to create a closure for the value of i
so that it is assigned to the enclosed variable at the time each anonymous function is created. 您需要为i
的值创建一个闭包,以便在创建每个匿名函数时将其分配给封闭变量。 If not, as you continue through the loop, the value of i
will change until the loop exits and it is left holding a value that is the length of your array + 1 (which is always an undefined index), and this is the i
to which all of your anonymous functions refer. 如果没有,当你继续循环时, i
的值将改变,直到循环退出并且它保持一个值,即数组的长度+ 1(总是一个未定义的索引),这就是i
所有匿名函数都引用的。 Try the following in your AJAX callback loop: 在AJAX回调循环中尝试以下操作:
google.maps.event.addListener(markersArray[i], 'click', (function(idx) {
return function() {
infoWindowsArray[idx].open(__mvcGoogleMap, markersArray[idx]);
};
})(i));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.