0

我正在使用谷歌地图 API v3。只要标记未定义，我的脚本就可以正常工作并显示汽车图标。但是当我在数据库中更新long lat并且ajax函数通过json返回一个新的long lat时，marker.setPosition(newLatLng)使标记消失......

请帮帮我，这是什么问题？这是我的代码：

 $(document).ready(function () {
    var map;
    var marker;
    function initialize() {
        var myLatlng = new google.maps.LatLng(<?php echo $c_lat; ?>, <?php echo $c_long; ?>);
        var myOptions = {
            zoom: 19,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById('driver_loc'), myOptions);
    }
function getLongLat(){
     $.ajax({
           type: "POST",
           url: "config/getLongLat.php?id=<?php echo $driverId; ?>",
           dataType: "json",
           success: function(data)
                {   
            var lat=data.lat; //returns new lat via db
            var lon=data.lon;
                // alert(lat);   
           var newLatLng = new google.maps.LatLng(lat, lon);

            if (marker != undefined)
                marker.setPosition(newLatLng);
            else
                marker = new google.maps.Marker({
                    position: newLatLng,
                    map: map,   
                    icon: 'images/car.png',
                    animation: google.maps.Animation.DROP, 
                    draggable: true
                });
            }
        });
        console.log(marker);
    }
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
  //  google.maps.event.addDomListener(window, 'load', callPosition);
    window.setInterval(function(){
  getLongLat();
}, 6326);
});
4

1 回答 1

2

一个好的做法是对 json 数据使用 parseFloat 方法。新位置可以在当前视口之外。要处理它，只需使用 map.setCenter([new_position]) 方法。您还可以使用 map.setZoom([zoom_level]) 更改缩放级别。在你的情况下：

  $(document).ready(function () {
    var map;
    var marker;
    function initialize() {
      var myLatlng = new google.maps.LatLng(<?php echo $c_lat; ?>, <?php echo $c_long; ?>);
      var myOptions = {
        zoom: 19,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById('driver_loc'), myOptions);
    }
    function getLongLat(){
      $.ajax({ type: "POST", url: "config/getLongLat.php?id=<?php echo $driverId; ?>", dataType: "json",
               success: function(data){   
                 var lat=parseFloat(data.lat); //returns new lat via db
                 var lon=parseFloat(data.lon);
                 var newLatLng = new google.maps.LatLng(lat, lon);

                 if (marker != undefined){
                   marker.setPosition(newLatLng);
                 } else {
                   marker = new google.maps.Marker({
                     position: newLatLng,
                     map: map,   
                     icon: 'images/car.png',
                     animation: google.maps.Animation.DROP, 
                     draggable: true
                   });
                 }
                 //Center map on a new position
                 map.setCenter(newLatLng);
                 //Change zoom level
                 //map.setZoom(19);
               }
      });
    }
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
    //  google.maps.event.addDomListener(window, 'load', callPosition);
    window.setInterval(function(){
      getLongLat();
    }, 6326);
  });
于 2012-06-02T04:01:51.347 回答