gpt4 book ai didi

javascript - Google Maps API V3 需要重新加载页面才能显示标记图标

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:37:44 26 4
gpt4 key购买 nike

我正在从数据库中以 JSON 格式读取点,以在页面上创建 map 标记和非结构化列表。添加一些代码来自定义列表元素后, map 在第一次请求时停止显示标记图标 - 直到发出页面重新加载。这是由于 API 超时吗?是否可以在加载 map 后从数组构建列表对象,或者是否有其他方法可以加快可能消除问题的代码? map 加载的标记可以很好地加倍这个数量的标记(300+)所以我知道问题是由于将格式添加到列表对象。不需要集群。该页面的演示版本可在此处获得

签署了 JS n00b。谢谢。…… JSON 支持的谷歌地图

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8">
var map;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var myLatlng = new google.maps.LatLng(49.57154029531499,-125.74951171875);

var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
streetViewControl: false
}

this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

} /* end initialize function */


<!-- load points from database into Locations JSON -->

$(document).ready(function () {
initialize();
$.getJSON("map-service.php?action=listpoints", function(json) {

if (json.Locations.length > 0) {
for (i=0; i<json.Locations.length; i++) {
var location = json.Locations[i];
addMarker(location);
}
}
});

//define grn icon as closed
var greenicon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';

function addMarker(location) {
if(location.datesummit == "0000-00-00") {
var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng),icon: greenicon};
//create marker info window content
var html='<B>'+location.name+'</B><BR> Register a summit <A href="http://goo.gl/Nl0UQ">here</A> ';
//create list element text and onclick
$("<li class=\"notclimbed\">")
.html(location.name+"</li>")
.click(function(){
infoWindow.close();
infoWindow.setContent(html);
infoWindow.open(map, marker)
})
.appendTo("#list");
}
else{
var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng)};
//create marker info window content
var html='<B>'+location.name+'</B><BR> Summitted: '+location.datesummit+'<BR> By:'+location.summitlog;
//create list element text and onclick
$("<li class=\"climbed\">")
.html(location.name+"</li>")
.click(function(){
infoWindow.close();
infoWindow.setContent(html);
infoWindow.open(map, marker)
})
.appendTo("#list");
}
var marker = new google.maps.Marker(markerOptions);

// add a listener to open an info window when a user clicks on one of the markers
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
infoWindow.setContent(html);
infoWindow.open(map, marker);
});

}; // end of addmarker function
});
</script>
</head>


<body>
<div id="banner" {vertical-align:text-top;} >
<img src="test.jpg" alt="Logo" style="width:150px;height:150px;vertical-align:middle">
<img src="test.png" alt="Logo" style="vertical-align:middle">
</div>

<div id="map_canvas" >
Map Here!
</div>

<div id="mindthegap"></div>

<div id="list" > </div>
</body>

最佳答案

在将 map 变量传递给 markerOptions 之前,您需要确保 map 变量已初始化。

一些过分热心的调试告诉我,在页面失败的时候, map 仍然是未定义的。

$(document).ready() 通常会在 body.onload 之前发生,所以要么在 $(document).ready(function() { ... } 的最顶部调用 initialize() );或将初始化代码放在那里。

此外,虽然不是绝对必要,但您应该考虑封装您的 map 变量而不是使用全局变量。如果您想在一页上显示 2 张 map 怎么办?

关于javascript - Google Maps API V3 需要重新加载页面才能显示标记图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9074991/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com