Question

我正在构建一个基于Google地图的网络应用程序，我在其上绘制用户位置的移动点。我从服务器连续获取用户位置，并希望在加载地图时使用当前用户位置以使窗口围绕它居中，这意味着，当用户加载网站时，地图将以第一个纬度/长度为中心从服务器获取但是使用户能够在之后平移地图而不将其重新定位在用户所在的位置。我能够使地图始终围绕用户位置居中，但无法弄清楚如何在初始化期间使用第一个获取的位置使地图居中。我的代码如下，任何帮助将不胜感激。谢谢！

 <script>

          var locations = [
                ['location a', 37.771678, -122.469357],
                ['location b', 37.768557, -122.438458],
                ['location c', 37.755121, -122.438973],
                 ['location d', 37.786127, -122.433223]
              ];
          var map;
          var i;
          var marker; 
          var google_lat = 37.722066;
          var google_long = -122.478541;
          var myLatlng = new google.maps.LatLng(google_lat, google_long);
          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)
          );

          function initialize() {

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

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

            $.ajax({
                    method : "GET",
                    url: "get_location.php",
                    success : function(data){
                        Tdata=JSON.parse(data);
                        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;
                            myLatlng = new google.maps.LatLng(google_lat, google_long);
                            userMarker.setPosition(myLatlng);
                            userMarker.setMap(map);
                            //map.setCenter(myLatlng); --> this is not what I want since it will always keep the map centerd around the user 
                        });
                    }, 1000);
            }

     </script>

Answer 1

仅在第一次设置地图中心。第一次检测的一种方法是在第一次加载数据时创建“userMarker”。

var userMarker;

$.ajax({
  method : "GET",
  url: "get_location.php",
  success : function(data){
    Tdata=JSON.parse(data);
    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;
      myLatlng = new google.maps.LatLng(google_lat, google_long);
      if (!userMarker || !userMarker.setPosition) {
        // create the marker
        userMarker = new google.maps.Marker({
          icon: image, 
          position: myLatlng, 
          map:map
        });
        // center the map the first time, when the marker is created
        map.setCenter(myLatlng);
      } else { // marker aleady exists
        userMarker.setPosition(myLatlng);
      }
    });
  }, 1000);
}

proof of concept fiddle

Google Maps v3 API：使用第一个用户位置来居中地图

1 个答案: