Fatal编程技术网
  • javascript/
  • Javascript 直到贴图稍微移动或单击后，标记才会显示

Javascript 直到贴图稍微移动或单击后，标记才会显示

javascript google-maps google-maps-api-3

Javascript 直到贴图稍微移动或单击后，标记才会显示,javascript,google-maps,google-maps-api-3,google-maps-markers,Javascript,Google Maps,Google Maps Api 3,Google Maps Markers,我的（削减）代码如下。我的标记不会显示，直到我单击或稍微移动地图。。。有没有办法让他们立刻出现 <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>TSF - Labou

我的（削减）代码如下。我的标记不会显示，直到我单击或稍微移动地图。。。有没有办法让他们立刻出现

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>TSF - Labour Plan </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">     </script>
<script type="text/javascript">
function initialize() {
    var centerlatlng = new google.maps.LatLng(53.644638, -2.526855);
    var myOptions = {
        zoom: 6,
        center: centerlatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var latlng = new google.maps.LatLng(51.752927, -0.470095);
    var img = "https://dl.dropboxusercontent.com/u/55888592/tsf-logo.gif";
    var info = "<img style = 'float: left' src='http://www.tsf.uk.com/wp-content/themes/default/images/tsf-logo.gif'><div style = 'float: right; width: 200px'><p><b>Job Number:</b> </p><p><b>Client:</b> ASDA</p><p><b>Location:</b> HEMEL HEMPSTEAD</p><p><b>Postcode:</b> HP2 4AA</p><p><b>Start Time:</b> 22:0</p><p><b>No of Men:</b> 10.0</p><p><b>Allocated Labour:</b> AB: 5.0, WK: 5.0, : , : , : , : </p><p><b>Job Information: </b>PICK UP TOOLS</div>";
    var infowindow = new google.maps.InfoWindow({
    });
    var marker = new google.maps.Marker({
    icon: img,
    position: latlng,
    map: map,
    content: info
    });
    marker.setMap(map);

    google.maps.event.addListener(marker, "click", function(content) {
        infowindow.setContent(this.content);
        infowindow.open(map,this);
    });
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>


TSF-劳工计划
函数初始化（）{
var centerlatlng=new google.maps.LatLng（53.644638，-2.526855）；
变量myOptions={
缩放：6，
中心：中心板条，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var latlng=新的google.maps.latlng（51.752927，-0.470095）；
变量img=”https://dl.dropboxusercontent.com/u/55888592/tsf-logo.gif";
var info=“工作编号：
客户：ASDA
地点：HEMEL HEMPSTEAD
邮政编码：HP2 4AA
开始时间：22:0
男性人数：10.0
分配的劳动力：AB:5.0，工作时间：5.0，：，，：，：，，：，，，，，，，，，，，，，：
；
var infowindow=new google.maps.infowindow({
});
var marker=new google.maps.marker({
图标：img，
位置：latlng，
地图：地图，
内容：信息
});
marker.setMap（map）；
google.maps.event.addListener（标记“单击”，函数（内容）{
infowindow.setContent（this.content）；
打开（地图，这个）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
根据Geocodezips的评论，这似乎是一个本地问题。

在谷歌地图api和marker cluster js的最新版本中，谷歌浏览器似乎仍然存在这个问题

因此，我将发布帮助我解决这个问题的代码

google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(function() {
        var cnt = map.getCenter();
        cnt.e+=0.000001;
        map.panTo(cnt);
        cnt.e-=0.000001;
        map.panTo(cnt);
    },400);
});
可以随意使用400的值（在我的例子中，小于400不能解决问题，但值越高-滞后时间越长）

附言。 确保已定义映射变量：

map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
我一直在努力解决同样的问题，听到其他人也有同样的问题，我非常高兴。我在Safari和Firefox中也遇到过GMAPSV3的问题。我尝试了您的解决方案，它也适用于我，但我使用了idle事件，而不是超时：

google.maps.event.addListener(map, 'idle', function(event) {
    var cnt = map.getCenter();
    cnt.e+=0.000001;
    map.panTo(cnt);
    cnt.e-=0.000001;
    map.panTo(cnt);
});
只需将其添加到初始化谷歌地图上即可。使用绑定到标记的信息窗口和圆圈可能会出现另一个问题。在我的例子中，我可以在信息框中设置圆的半径。跳出输入字段（更改或不更改半径值）会使红色标记变为蓝色。如果随后放大/缩小，则会重新显示原始颜色。要解决此问题，必须快速更改缩放级别（在radius_changed事件中）：

我已经两次解决了调用markerclusterer变量重新绘制的问题：

mc.repaint();
map.fitBounds(bounds); // for centering within the marker bounds
mc.repaint(); // repaint for getting it fixed
希望这对仍然面临此问题的任何人都有帮助。

您将调用
initialize
两次，一次使用
domstener
调用，一次使用
body onload
调用。我将删除
body onload
调用。看看这是否有帮助。我还会将javascript从头部移动到身体。在当地，我没有任何问题。我试过，但没有运气。我刚刚在浏览器中检查过，它工作正常，所以这个问题似乎与chrome有关？我能在网上找到的唯一类似问题是：我在Mac上的Chrome没有问题。可能是因为缺少DOCTYPE？在文件顶部添加
。您是如何简化代码的？你看到这个版本的问题了吗？你是在使用MarkerClusterer还是MarkerManager（在没有被裁减的版本中）？我的完整代码只是有更多的标记，是的，我对这个版本有一个问题。不，我没有使用markerclusterer或markermanager。“本地问题”可能发生在任何地方。。你是如何解决这个问题的？原因可能是什么？我没有，但它不会发生在IE中，这是我将主要使用它的地方。。。如果其他人没有这种情况，那一定是我这边的问题。谢谢。为我工作。你在谷歌上看到过关于这个的错误列表吗？我在使用100+标记时也遇到过同样的问题。PC浏览器上缺少一些标记，但移动设备上的标记要多得多。我发现在地图上模拟任何导致它移动的用户动作都可以修复它。基本上和你的代码一样。Op需要把他的答案改成这个。。。setTimeout和轻微的panTo和back绝对是答案。把它放到我的代码中，在那里我遇到了这个问题，它被修复了。这很简单，对我来说很有效。不过，我必须密切关注地图上的任何副作用：D 
mc.repaint();
map.fitBounds(bounds); // for centering within the marker bounds
mc.repaint(); // repaint for getting it fixed