Ошибка Google Map API SetPosition

Question

Я использую API Карт Google v3. Мой скрипт отлично работает и показывает значок автомобиля, пока не определен. Но когда я обновляю long lat в базе данных, а функция ajax возвращает новую длинную лат через json, 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

Хорошей практикой является использование метода parseFloat для данных json. Новая позиция может находиться за пределами текущего порта представления. Чтобы справиться с этим, просто используйте метод 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); 
    });