无法使用Javascript在谷歌地图中正确拖动标记

时间:2017-04-11 10:15:32

标签: javascript google-maps

我有一个问题。我无法使用Javascript拖动谷歌地图的标记。我在下面解释我的代码。

geocoder.geocode( { 'address': addrs}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        $('#latitude').val(results[0].geometry.location.lat());
        $('#longitude').val(results[0].geometry.location.lng());
        var latitude=results[0].geometry.location.lat();
        var longitude=results[0].geometry.location.lng();
        var title=document.getElementById('googleMap').value;
        var desc=title+","+address;
        console.log(latitude,longitude);
        var markers = [{"lat":latitude,"lng":longitude},{"title": title,"lat":latitude,"lng":longitude,"description":desc}];
    // $window.addEventListener('load', onload, false);
     // $window.onload = function () {
    setTimeout(function(){
        var mapOptions = {
         center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                google.maps.event.trigger(map, "resize");
                var infoWindow = new google.maps.InfoWindow();
                var lat_lng = new Array();
                var latlngbounds = new google.maps.LatLngBounds();
                for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                draggable: true,
                position: myLatlng,
                map: map,
                title: data.title
                });
                latlngbounds.extend(marker.position);
                (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
                });
                })(marker, data);
                google.maps.event.addListener(marker, 'dragend', function (event) {
                    var latdrag = this.getPosition().lat();
                    var longdrag= this.getPosition().lng();
                    console.log('latlong',latdrag,longdrag);
                });
                }
                map.setCenter(latlngbounds.getCenter());
                map.fitBounds(latlngbounds);
                zoomChangeBoundsListener = 
                google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
if (this.getZoom()){
    this.setZoom(12);
}
});
 setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);
},2000);
} 
else {
    alert("Geocode was not successful for the following reason: " + status);
              }
});

这里的mu问题是我可以拖动标记但是当我拖动时,一个新的标记会进入可丢弃的位置,第一个仍然存在。在这里,我需要将单个标记拖动到任何地方,并且不会创建新标记。请帮我解决此问题。

1 个答案:

答案 0 :(得分:1)

您正在同一位置创建两个标记并拖动顶部标记。

var markers = [{“lat”:latitude,“lng”:longitude},{“title”:title,“lat”:latitude,“lng”:经度,“description”:desc}];

创建一个包含两个元素的数组,并在循环中创建两个标记。