本文介绍了谷歌地图API获取经纬度和替换标记?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

因此,当用户输入地址时,它添加了很好的标记,用户也可以将标记移动到新的位置并检索它的lat和lng。然而,它没有做的是:


  1. 从地址获取lat和lng(当pin被添加到页面时)

  2. 如果地址改变,它会添加一个新的标记,而不是替换现有的标记。

以下是代码: p>

  var map; 
函数initMap(){
map = new google.maps.Map(document.getElementById('map'),{
zoom:8,
center:{lat: - 34.397,lng:150.644}
});
var geocoder = new google.maps.Geocoder();
document.getElementById('postcode')。addEventListener('keyup',function(){
geocodeAddress(geocoder,map);
});
}
函数geocodeAddress(geocoder,resultsMap){
var address = document.getElementById('address1')。value +'\xa0'+ document.getElementById('address2')。值+','+ document.getElementById('postcode')。value;
console.log(地址);
geocoder.geocode({'address':address},function(results,status){
if(status ==='OK'){
//如果标记存在,替换它
map.setCenter(results [0] .geometry.location);
var marker = new google.maps.Marker({
map:map,
position:results [0] .geometry.location,
title:address,
draggable:true,
//获取lng和lat并将其保存为2个独立变量?
} );
google.maps.event.addListener(marker,'dragend',function(marker){
var latLng = marker.latLng;
currentLatitude = latLng.lat();
currentLongitude = latLng.lng();
console.log(currentLatitude);
console.log(currentLongitude);
$(#latitude).val(currentLatitude);
$(#longitude).val(currentLongitude);
});
} else {
$('#error')。append('< div class =alert alert-danger>地址找不到请重试< / div>');
$(。alert-danger)。fadeOut(5000);
}
});


解决方案

地址(当引脚添加到页面中)时,您可以

  lat = results [0] .geometry.location.lat() ; 

lng = results [0] .geometry.location.lng();

用于更改标记而不是创建新标记,您可以定义globale(窗口级别)var标记并将前夕分配给此var创建标记的结果请记住setMap(null)用于隐藏旧标记

  var marker; 
var map;

if(marker!= null){
marker.setMap(null);
}

marker = new google.maps.Marker({
map:map,
position:results [0] .geometry.location,
title:address,
draggable:true,
//获取lng和lat并将其保存为2个独立变量?
});


So at the moment when user enter address it adds the marker which is fine, user can also move the marker to a new location and retrieve it's lat and lng. However what it doesn't do is:

  1. Get lat and lng from the address (when pin is added to page)
  2. If address changes it adds a new marker instead of replacing existing one.

Here's the code:

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: -34.397, lng: 150.644}
    });
    var geocoder = new google.maps.Geocoder();
    document.getElementById('postcode').addEventListener('keyup', function() {
        geocodeAddress(geocoder, map);
    });
}
function geocodeAddress(geocoder, resultsMap) {
    var address = document.getElementById('address1').value + '\xa0' + document.getElementById('address2').value +','+ document.getElementById('postcode').value;
    console.log(address);
    geocoder.geocode({'address': address}, function(results, status) {
        if (status === 'OK') {
            //if marker exist, replace it if not create it.
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: address,
                draggable:true,
                //get lng and lat and save it to 2 seperate variables?
            });
        google.maps.event.addListener(marker, 'dragend', function(marker){
        var latLng = marker.latLng;
        currentLatitude = latLng.lat();
        currentLongitude = latLng.lng();
        console.log(currentLatitude);
        console.log(currentLongitude);
        $("#latitude").val(currentLatitude);
        $("#longitude").val(currentLongitude);
                });
          } else {
            $('#error').append('<div class="alert alert-danger">Address not found please try again</div>');
            $(".alert-danger").fadeOut(5000);
          }
        });
      }
解决方案

for Get lat and lng from the address (when pin is added to page) you can

   lat = results[0].geometry.location.lat();

   lng = results[0].geometry.location.lng();

for change the marker instead of create a new one you can define a globale (window level ) var marker and assign eve to this var the result for marker creation remember tor setMap(null) for hide the old marker

var marker;
var map;

    if (marker != null) {
       marker.setMap(null);
    }

    marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
            title: address,
            draggable:true,
            //get lng and lat and save it to 2 seperate variables?
        });

这篇关于谷歌地图API获取经纬度和替换标记?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 04:10