Javascript 地图标记位置_Javascript_Google Maps_Google Maps Api 3

Javascript 地图标记位置

javascript google-maps google-maps-api-3

Javascript 地图标记位置,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在谷歌地图API v3中使用以下函数当用户将地图标记拖放到某个位置时，该位置/地址将显示在输入字段中如何允许访问者在此输入字段中键入其位置，然后单击按钮将标记移动到所需位置这是javascript代码： <script type="text/javascript"> var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { geocoder.geocode

我正在谷歌地图API v3中使用以下函数

当用户将地图标记拖放到某个位置时，该位置/地址将显示在输入字段中

如何允许访问者在此输入字段中键入其位置，然后单击按钮将标记移动到所需位置

这是javascript代码：

<script type="text/javascript">
var geocoder = new google.maps.Geocoder();              
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});

}

function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}

function updateMarkerAddress(str) {
document.getElementById('address').value = str;
}

function initialize() {

 var latLng = new google.maps.LatLng(34.02733457017991,-118.25942712402343);
 map = new google.maps.Map(document.getElementById('mapCanvas'), {
 zoom:8,
 center: latLng,
 zoomControlOptions: {
 style: google.maps.ZoomControlStyle.SMALL
 },
 mapTypeControl: false,
 streetViewControl: false,
 scrollwheel: false,
 mapTypeId: google.maps.MapTypeId.TERRAIN
 });

 var marker = new google.maps.Marker({
 position: latLng,
 title: 'Drag and Drop me anywhere',
 map: map,
 icon : 'markers/map_marker.png',
 draggable: true
 });



 updateMarkerPosition(latLng);
 geocodePosition(latLng);


 google.maps.event.addListener(marker, 'dragstart', function() {
 updateMarkerAddress('Locating...');
 });

  google.maps.event.addListener(marker, 'drag', function() {

  updateMarkerPosition(marker.getPosition());
  });

  google.maps.event.addListener(marker, 'dragend', function() {

  geocodePosition(marker.getPosition());
  });
  }

  google.maps.event.addDomListener(window, 'load', initialize);             
 </script>


var geocoder=new google.maps.geocoder（）；
功能地理编码定位（pos）{
地理编码({
车床：位置
}，职能（回应）{
if（responses&&responses.length>0）{
UpdateMarkeradAddress（响应[0]。格式化的\u地址）；
}否则{
UpdateMarkeradAddress（'无法确定此位置的地址'）；
}
});
}
函数updateMarkerStatus（str）{
document.getElementById（'markerStatus'）。innerHTML=str；
}
函数更新标记位置（latLng）{
document.getElementById（'info'）。innerHTML=[
latLng.lat（），
latLng.lng（）
]。加入（‘，’）；
}
函数更新标记地址（str）{
document.getElementById（'address'）。value=str；
}
函数初始化（）{
var latLng=新的google.maps.latLng（34.02733457017991，-118.25942712402343）；
map=new google.maps.map（document.getElementById（'mapCanvas'）{
缩放：8，
中心：拉特林，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL
},
mapTypeControl:false，
街景控制：错误，
滚轮：错误，
mapTypeId:google.maps.mapTypeId.TERRAIN
});
var marker=new google.maps.marker({
位置：latLng，
标题：“将我拖放到任何地方”，
地图：地图，
图标：“markers/map_marker.png”，
德拉格布尔：是的
});
更新市场定位（latLng）；
地理共定位（latLng）；
google.maps.event.addListener（标记'dragstart'，函数（）{
UpdateMarkeradAddress（'定位…'）；
});
google.maps.event.addListener（标记'drag'，function（）{
updateMarkerPosition（marker.getPosition（））；
});
google.maps.event.addListener（标记'dragend'，function（）{
geocodePosition（marker.getPosition（））；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

这是html代码：

<body>
<div id="mapCanvas"></div>
<div id="infoPanel">

<div class="row"><span class="label">Lat, Lon:</span>
<span id="info"></span></div>
<div class="row"><span class="label">Address:</span>
<input class="address-field" id="address"/>
<button class="button-locate" id="locate">Locate</button></div>
</div>
</body>


Lat，Lon：
地址:
定位

地址的结果lat，lng可以用这个来设置标记的位置，试试这个代码

var geocoder = new google.maps.Geocoder();
var marker;
function geocodePosition(pos) {
geocoder.geocode({
     address: $("#idOfInput").val(),
}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK){
          map.setCenter(results[0].geometry.location);
          marker.setPosition(results[0].geometry.location);
          updateMarkerAddress(results[0].formatted_address);
    } else {
          updateMarkerAddress('Cannot determine address at this location.');
    }
});

}

单击按钮时，使用地理编码地址并放置标记。我这样做了，现在可以工作，但单击按钮后，拖动标记时定位不会更新输入字段中的位置。此外，每次单击“定位”按钮时，它都会再添加一个标记。我只想使用一个标记。所有这些都是重复的问题，你搜索过解决方案了吗？@geocodezip我搜索过，但还没有找到解决方案！

var geocoder = new google.maps.Geocoder();
var marker;
function geocodePosition(pos) {
geocoder.geocode({
     address: $("#idOfInput").val(),
}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK){
          map.setCenter(results[0].geometry.location);
          marker.setPosition(results[0].geometry.location);
          updateMarkerAddress(results[0].formatted_address);
    } else {
          updateMarkerAddress('Cannot determine address at this location.');
    }
});

}