Javascript Google Maps API V3要求重新加载页面以显示标记图标
我将DB中的点作为JSON读取，以在页面上创建地图标记和非结构化列表。添加一些代码来自定义列表元素后，地图在第一次请求时停止显示标记图标，直到发出页面重新加载。这是由于API超时造成的吗？是否可以在加载映射后从数组中构建list对象，或者是否有其他方法来加速代码，从而消除问题？地图加载的标记数量是这个数量的两倍（300+），所以我知道问题是由于将格式添加到列表对象。不需要集群。此处提供了该页面的演示版本 签署了一份JS n00b。谢谢 ...... 基于JSON的谷歌地图Javascript Google Maps API V3要求重新加载页面以显示标记图标,javascript,jquery,google-maps-api-3,google-maps-markers,Javascript,Jquery,Google Maps Api 3,Google Maps Markers,我将DB中的点作为JSON读取，以在页面上创建地图标记和非结构化列表。添加一些代码来自定义列表元素后，地图在第一次请求时停止显示标记图标，直到发出页面重新加载。这是由于API超时造成的吗？是否可以在加载映射后从数组中构建list对象，或者是否有其他方法来加速代码，从而消除问题？地图加载的标记数量是这个数量的两倍（300+），所以我知道问题是由于将格式添加到列表对象。不需要集群。此处提供了该页面的演示版本 签署了一份JS n00b。谢谢 ...... 基于JSON的谷歌地图 <script
<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>
var映射；
var infoWindow=new google.maps.infoWindow（）；
函数初始化（）{
var mylatng=new google.maps.LatLng（49.57154029531499，-125.74951171875）；
变量myOptions={
缩放：8，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.TERRAIN，
街景控制：错误
}
this.map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
}/*结束初始化函数*/
$（文档）.ready（函数（）{
初始化（）；
$.getJSON（“map service.php？action=listpoints”，函数（json）{
如果（json.Locations.length>0）{
对于（i=0；i，在将map变量传递给markerOptions之前，需要确保该变量已初始化
有点过于热心的调试告诉我，在页面失败的时候，映射仍然是未定义的
$（document）.ready（）通常出现在body.onload之前，因此要么在$（document）.ready（function（）{…}）的最顶端调用initialize（）；要么将initialize代码放在那里
此外，虽然不是严格必要的，但是你应该考虑封装你的map变量而不是使用全局变量。如果你想在一个页面上有2个地图，那该怎么办？
这是一个很长的尝试，但是尝试设置一个“内容类型：应用程序/JSON”的标题。在map-service.php页面上。@corbin感谢这条提示-我理解这应该在响应中-但是正如你所建议的那样..它没有改变结果。你看了我的答案吗？这肯定是问题（或者可能是“a”问题--不确定它是否是唯一的问题）。这是一个时间问题。将初始化调用移到问题的顶部$（document）.ready（function（）成功了。谢谢！@corbino problem。很高兴我能帮上忙：）。