javascript - 谷歌地图 v3 : plot different sets of markers

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

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

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