[英]How to get latitude, longitude of search result marker with google maps javascript
我正在嘗試獲取標記的緯度,經度,該標記顯示為可拖動的搜索結果,因此當用戶移動作為我代碼的標記時,我需要保持其更新緯度,經度
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
var input = (document.getElementById('pac-input'));
var searchBox = new google.maps.places.SearchBox((input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)};
map = new google.maps.Map(document.getElementById("map-canvas"));
google.maps.event.addListener(map, 'click', function(event) {
if (marker) {
marker.setMap(null);
marker = null;}
document.getElementById('txtLat').value=event.latLng.lat();
document.getElementById('txtLng').value=event.latLng.lng();
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
map: map,
title: place.name,
draggable:true,
position: place.geometry.location});
markers.push(marker);
bounds.extend(place.geometry.location);}
map.fitBounds(bounds);});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);});}
google.maps.event.addDomListener(window, 'load', initialize);
<input id="pac-input" class="controls" type="text" placeholder="Enter location">
<div id="map-canvas"></div>
<table >
<tr><td><input type="text" id="txtLat" name="txtLat"style="width:150px"></td>
<td><input type="text" id="txtLng" name="txtLng"style="width:150px"></td></tr>
</table>
沒有一個有效的示例,我無法調試您的代碼,但這是我相信您正在嘗試做的事情的我自己的版本。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src='http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false'></script>
</head>
<body>
<h1>MapAPI</h1>
<div id="mapCon" style='height:512px;width:512px;'></div>
<div id='output'></div>
<script>
//the API key is used by w3schools, it remains only as an example
//assign map values
var mapVal={
center:new google.maps.LatLng(38,-78),
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//assign marker values
var mark=new google.maps.Marker({
draggable:true,
position:new google.maps.LatLng(38,-78)
});
//define and place map and marker
map=new google.maps.Map(document.getElementById('mapCon'),mapVal);
mark.setMap(map);
//keep updating incase the marker is moved
function update(){
//get coordinates directly from the marker
output.innerHTML='Latitude: '+mark.position.k+'<br>Longitude: '+mark.position.A;
//try to update at 60fps, stop if the window isnt in focus
requestAnimationFrame(update);
}
google.maps.event.addDomListener(window,'load',update);
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.