标记在地图略微移动或点击之前不显示

时间:2013-12-31 17:55:42

标签: 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 - 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>

4 个答案:

答案 0 :(得分:18)

谷歌地图api和标记群集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不会修复问题,但更高的值 - 更高的延迟时间)

P.S。 确保你已经定义了地图变量:

map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

答案 1 :(得分:4)

我正在努力解决同样的问题,很高兴听到其他人有同样的问题。我在Safari和Firefox中也遇到了GMaps V3的问题。我尝试了你的解决方案,它也适用于我,但我使用空闲事件而不是超时:

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);
});

只需在初始化Google地图时添加即可。可能会出现另一个问题,即使用infowindows和与标记绑定的圆圈。在我的情况下,我可以设置信息框中的圆的半径。跳出输入字段(有或没有改变半径值)使得红色标记变为蓝色。如果您然后放大/缩小原始颜色再次出现。要解决此问题,您必须快速更改缩放级别(在radius_changed事件中):

map.setZoom(map.getZoom()-1);
map.setZoom(map.getZoom()+1);

答案 2 :(得分:1)

根据Geocodezips的评论,这似乎是一个本地问题。

答案 3 :(得分:1)

我已经两次在markerclusterer变量上解决了这个调用重绘:

mc.repaint();
map.fitBounds(bounds); // for centering within the marker bounds
mc.repaint(); // repaint for getting it fixed

希望这对任何仍然面临这个问题的人都有帮助。