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

Question

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

 <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