动态更新MarkerwithLabel Google Maps API V3

时间:2013-03-29 20:00:55

标签: javascript google-maps

我是Google Maps API的新手。我有一个HTML页面,它调用一个事件处理程序,然后使用XML返回数据来填充标记和标签。问题是我似乎无法刷新标签值。标签刚刚写完,IE迟早会崩溃并说“停止运行此脚本?此页面上的脚本导致您的Web浏览器运行缓慢.......”

<!--<script type="text/javascript" src="/js/labeledmarker.js"></script>-->

<script type="text/javascript">

 var map;
      function initialize() {
        var mapDiv = document.getElementById('map-canvas');
        map = new google.maps.Map(mapDiv, {
          center: new google.maps.LatLng(27.896415, -81.843137),
          zoom: 9,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

      }

      function addMarkers() 
 {

     downloadUrl("get_waittime_feed.ashx", function (data) {

         var markers = data.documentElement.getElementsByTagName("marker");
         for (var i = 0; i < markers.length; i++) {
             var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("latitude")),
                                    parseFloat(markers[i].getAttribute("longitude")));
             var markericons = markers[i].getAttribute("markericons");
            var waitER = markers[i].getAttribute("waitER");

             var customIcons = { 0: { icon: new google.maps.MarkerImage('../img/greenbb.png', new google.maps.Size(30, 30)) },
                 1: { icon: new google.maps.MarkerImage('../img/redbb.png', new google.maps.Size(30, 30)) },
                 2: { icon: new google.maps.MarkerImage('../img/hospital.png', new google.maps.Size(35, 35))}
             };
             var icon = {}; if (markericons == '0') {
                 icon = customIcons[0];
             }
             else if (markericons == '1') {
                 icon = customIcons[1];
             }
             else if (markericons == '2') {
                 icon = customIcons[2];
             };

             var marker = new MarkerWithLabel({
                position: latlng,
                map: map,
                icon: icon.icon,
                labelContent: waitER,
                labelAnchor: new google.maps.Point(3, 30),
                labelClass: "labels", // the CSS class for the label
                labelInBackground: false
                });

         }
     });

};

setInterval(addMarkers, 5000);

3 个答案:

答案 0 :(得分:4)

markers[i].label.setStyles(); // Force label to redraw (makes update visible)

不要为我工作,但

markers[i].label.draw(); // redraw the label for me

答案 1 :(得分:4)

这对我有用

marker.labelContent = 'New Label';

marker.label.setContent();

答案 2 :(得分:3)

IE提出警告的原因是您实际上没有更新标记 - 每次调用addMarkers()时,您都会创建一组新的标记。因此,地图需要更长时间才能刷新,直到超过IE的IE时限。

不是每次使用var marker = new MarkerWithLabel()创建一个新的,而是在第一次调用函数时创建它们,然后在每次调用后更新它们。例如:

totalmarkers = markers.length;
for (i = 0; i < totalmarkers; i++) {
    if (markers[i] == null) { // Create your marker here
        markers[i] = new MarkerWithLabel({
            position: latlng,
            map: map,
            icon: icon.icon,
            labelContent: waitER,
            labelAnchor: new google.maps.Point(3, 30),
            labelClass: "labels", // the CSS class for the label
            labelInBackground: false
            });
    } else { // Update your marker here
        markers[i].labelContent = 'label content';
        markers[i].labelClass = 'label class';
        markers[i].label.setStyles(); // Force label to redraw (makes update visible)
        markers[i].setPosition(googlemapslatlng); // Move the marker to a new position
        markers[i].icon = iconurl; // If you want to change the icon
        markers[i].setShape(); // Force the marker icon to redraw
    }

希望有所帮助。另请查看this thread以更新标记标签。