谷歌地图v3：绘制不同套标记

Question

我想在谷歌地图上绘制一组固定的标记和用户位置的标记。对于这两组标记，我想使用不同的图像作为标记，但是有些奇怪的事情发生了：加载页面时，“固定”标记得到正确绘制，但随即立即消失（数组中的最后一个）然后显示用户位置。另外，第一固定位置获得用户位置标记图像，并且用户定位标记获取固定标记的图像。理想情况下，数组中的位置将完全绘制（全部为4），并在标记上绘制red_dot.png图像，用户使用标记上的bluedot_retina.png进行定位。

这真的很奇怪，我正在努力弄清楚什么是根本原因。感谢有关此问题的任何帮助。谢谢！

<script> 

     var locations = [ 
      ['location a', 37.60756088, -122.42793323], 
      ['location b', 37.759736, -122.426957], 
      ['location c', 37.752950, -122.438458], 
      ['location d', 37.763128, -122.457942] 
      ]; 
     var map; 
     var i; 
     var marker; 
     var google_lat = 37.757996; 
     var google_long = -122.404479; 
     var myLatlng = new google.maps.LatLng(google_lat, google_long); 

     //google.maps.visualRefresh = true; 

     function initialize() { 

     var mapOptions = { 
      zoom: 12, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 


     var image_dot = new google.maps.MarkerImage(
      'images/red_dot.png', 
      null, // size 
      null, // origin 
      new google.maps.Point(8, 8), // anchor (move to center of marker) 
      new google.maps.Size(8, 8) // scaled size (required for Retina display icon) 
    ); 

     marker = new google.maps.Marker({ 
       flat: true, 
       position: myLatlng, 
       icon: image, 
       optimized: false, 
       map: map, 
       visible: true, 
       title: 'I might be here' 
     }); 

     setMarkers(map, locations); 
     } //initialize(); 


     function setMarkers(map, locations) { 

      for (var i = 0; i < locations.length; i++) { 
      var beach = locations[i]; 
      var myLatLng1 = new google.maps.LatLng(beach[1], beach[2]); 
      marker = new google.maps.Marker({ 
      position: myLatLng1, 
      icon: image_dot, 
      map: map 
      }); 
     } 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

    <script type="text/javascript"> 

     var Tdata; 
     var image = new google.maps.MarkerImage(
      'images/bluedot_retina.png', 
      null, // size 
      null, // origin 
      new google.maps.Point(8, 8), // anchor (move to center of marker) 
      new google.maps.Size(17, 17) // scaled size (required for Retina display icon) 
     ); 
     var userMarker = new google.maps.Marker({icon: image}); 

     //var userMarker = new google.maps.Marker({icon: 'images/bluedot_retina.png'}); 

     $.ajax({ 
       method : "GET", 
       url: "get_location.php", 
       success : function(data){ 
        Tdata=JSON.parse(data); 
        // console.log(data.lat); 
        console.log(Tdata.lat); 
        myFunction(); 
       } 
     }); 

     function myFunction(){ 
       var interval = setInterval(function() { 
        $.get("get_location.php", function(Tdata) { 
         var JsonObject= JSON.parse(Tdata); 
         google_lat = JsonObject.lat; 
         google_long = JsonObject.long; 
         console.log(google_lat, google_long); 
         // $('#data').html('google_lat, google_long'); 
         myLatlng = new google.maps.LatLng(google_lat, google_long); 
         //marker.setPosition(myLatlng); 
         userMarker.setPosition(myLatlng); 
         userMarker.setMap(map); 
         //map.setCenter(myLatlng); 
        }); 
       }, 1000); 
     } 

    </script> 

Answer 1

是一个全局变量。您正在将它用于所有位置和用户的位置标记。不要这样做，请为这两类标记分配唯一的（或本地）名称。

var Tdata; 
var userMarker = new google.maps.Marker({icon: URL/to/custom/icon/for/user}); 
$.ajax({ 
    method : "GET", 
    url: "get_location.php", 
    success : function(data){ 
     Tdata=JSON.parse(data); 
     // console.log(data.lat); 
     console.log(Tdata.lat); 
     myFunction(); 
    } 
}); 

function myFunction(){ 
    var interval = setInterval(function() { 
    $.get("get_location.php", function(Tdata) { 
     var JsonObject= JSON.parse(Tdata); 
     google_lat = JsonObject.lat; 
     google_long = JsonObject.long; 
     console.log(google_lat, google_long); 
     // $('#data').html('google_lat, google_long'); 
     myLatlng = new google.maps.LatLng(google_lat, google_long); 
     userMarker.setPosition(myLatlng); 
     userMarker.setMap(map); 
     map.setCenter(myLatlng); 
    }); 
    }, 1000); 
}