2016-11-03 4 views
-1

Я интегрирую Карты Google, и пользователь помещает булавку в их местоположение. Затем я использую событие dragend для получения lat и lng. У меня есть следующий код, но я продолжаю получать следующую ошибку:Javascript: Uncaught TypeError: Не удается прочитать свойство «lat» undefined (...)

Uncaught TypeError: Cannot read property 'lat' of undefined(…) 

В чем проблема?

<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?key=API_KEY"> 
</script> 
<script type="text/javascript"> 
    function initialize() { 
    var map; 

    var latlng = new google.maps.LatLng(-17.86389, 31.02972); 
    var myOptions = { 
     zoom: 10, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    // Creating a marker and positioning it on the map 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(-17.86389, 31.02972), 
     map: map, 
    draggable:true, 
    title:"Drag pin to your exact store location." 
    }); 


google.maps.event.addListener(marker, 'dragend', function (event) { 
document.getElementById("latbox").value = event.LatLng.lat(); 
document.getElementById("lngbox").value = event.LatLng.lng(); 

}); 

} 

</script> 
<div id="map_canvas" style="width:100%; height:100%"></div> 
<input size="20" type="text" id="latbox" name="lat" > 
<input size="20" type="text" id="lngbox" name="lng" > 

У меня также есть:

<body onload="initialize()"> 

Конечно, это должно работать?

+0

означает 'LatLng' неопределен – epascarello

+0

Чего не хватает? Что я должен сделать, чтобы определить это? @epascarello –

+0

Я не уверен, что исправить его 'console.log (event)' и посмотреть, где находятся данные, которые вы пытаетесь прочитать – epascarello

ответ

0

JavaScript чувствителен к регистру, поэтому вам нужно лечить его таким образом.
Попробуйте

document.getElementById("latbox").value = event.latLng.lat(); 
document.getElementById("lngbox").value = event.latLng.lng(); 

(обратите внимание на нижний регистр l в latLng)

+0

Это решило. –

0

MouseEvent не имеет .LatLng свойство. Javascript чувствителен к регистру, имя свойства .latLng

Изменение:

google.maps.event.addListener(marker, 'dragend', function (event) { 
    document.getElementById("latbox").value = event.LatLng.lat(); 
    document.getElementById("lngbox").value = event.LatLng.lng(); 
}); 

To:

google.maps.event.addListener(marker, 'dragend', function (event) { 
    document.getElementById("latbox").value = event.latLng.lat(); 
    document.getElementById("lngbox").value = event.latLng.lng(); 
}); 

proof of concept fiddle

фрагмент кода:

function initialize() { 
 
    var map; 
 

 
    var latlng = new google.maps.LatLng(-17.86389, 31.02972); 
 
    var myOptions = { 
 
    zoom: 10, 
 
    center: latlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    myOptions); 
 

 
    // Creating a marker and positioning it on the map 
 
    var marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(-17.86389, 31.02972), 
 
    map: map, 
 
    draggable: true, 
 
    title: "Drag pin to your exact store location." 
 
    }); 
 

 

 
    google.maps.event.addListener(marker, 'dragend', function(event) { 
 
    document.getElementById("latbox").value = event.latLng.lat(); 
 
    document.getElementById("lngbox").value = event.latLng.lng(); 
 

 
    }); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize);
html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input size="20" type="text" id="latbox" name="lat"> 
 
<input size="20" type="text" id="lngbox" name="lng"> 
 
<div id="map_canvas" style="width:100%; height:100%"></div>

Смежные вопросы