Question

我正在使用Google Maps API v3。我的脚本工作正常，只显示一个汽车图标标记未定义。但是当我在数据库中更新long lat并且ajax函数通过json返回一个新的长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);
});

Answer 1

一个好的做法是对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);
  });

Google Map API SetPosition错误

1 个答案: