好的家伙和女孩,我在添加多个标记方面遇到了一些问题。我发誓我已经搜索过,直到我的眼睛交叉,我只是想不出来。
这是我的代码:
function initialize()
{
cnt = 0;
var icon = "bullet-red-icon.png";
var mapProp = {
center: new google.maps.LatLng(39.8282,-98.5795),
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
$("marker", mapxml).each(
function(i)
{
var iwcontent = $(this).find("mname").text() + "<br /><br />";
iwcontent += $(this).find("mstreet").text() + "<br />" + $(this).find("mcity").text() + " " + $(this).find("mstate").text() + " " + $(this).find("mzip").text() + "<br /><br />";
iwcontent += "UNITS: " + $(this).find("units").text() + "<br />";
iwcontent += "UNIT COST: " + $(this).find("unitcost").text() + "<br />";
iwcontent += "TOTAL FUEL COST: " + $(this).find("fuelcost").text() + "<br />";
var mlat = parseFloat($(this).find("mlat").text());
var mlon = parseFloat($(this).find("mlon").text());
addMarker(iwcontent, mlat, mlon, map, i);
}
);
$("#d_transmap").show();
$(".t_loader").hide();
}
现在我知道所有的数据都存在,我有控制台。记录了一切,一切似乎都很好。 但是根本没有标记出现。
这是addMarker函数:
function addMarker(content, lat, lon, map, i)
{
var point = new google.maps.LatLng(lat, lon.toFixed(6));
var marker = new google.maps.Marker({ position: point, icon: "bullet-red-icon.png", map: map });
var infowindow = new google.maps.InfoWindow({ content: content });
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, i));
}
现在,如果我走出循环并调用它:
addMarker(content, 39.8282, -98.5795, map, i)
它会吐出一个标记!所以我最初的想法是我的lat长数据有问题。但是我记录了所有这些,甚至记录了标记本身,它似乎创建了它们。我只是没有看到他们。
世界上我做错了什么?
答案 0 :(得分:1)
您的addMarker()
功能存在一些问题。
lon.toFixed(6)
的电话不应该在那里。只需直接使用lon
即可。另外,我建议使用名称lng
代替lon
,以便与Maps API术语保持一致。addMarker()
是一个函数。你不需要另一个闭包。而且您根本不需要i
参数。这并不妨碍您的代码工作,但这是您不需要的许多额外复杂功能。function addMarker(content, lat, lng, map) {
var point = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: point,
icon: "bullet-red-icon.png",
map: map
});
var infowindow = new google.maps.InfoWindow({ content: content });
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
更新:在测试页面中一直缩放,以便您可以看到南极洲。找到你遗失的标记? : - )
(更新2:嗯,有时我会在那里看到标记,有时候我没有。但继续阅读...)
现在检查XML下载中的纬度和经度,例如:
<mlat>-82.753936</mlat>
<mlon>42.675168</mlon>
答案 1 :(得分:0)
在下面的代码中使用多个标记 变量 arr 是一个lat long值
的数组 function initialize(arr) {
directionsDisplay = new google.maps.DirectionsRenderer();
geocoder = new google.maps.Geocoder();
var mapOptions = {
};
var icon = "bullet-red-icon.png";
map = new google.maps.Map(document.getElementById('map_addresses'),mapOptions);
jQuery(arr).each(function(i){
if(typeof arr[i] != 'undefined'){
var latlng = new google.maps.LatLng(arr[i][0],arr[i][1]);
geocoder.geocode(
{'latLng': latlng},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon ,
animation: google.maps.Animation.DROP,
});
//google.maps.event.addListener(marker, 'click', toggleBounce);
markersArray.push(marker);
} else {
alert('Geocode was not successful for the following reason: '
+ status);
}
}
);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
希望这会对你有所帮助