如何使用jQuery将可拖动标记添加到Google Map [英] How to add draggable markers to a Google Map using jQuery

问题描述

我正在玩Google Maps，我需要一些指示： - ）

我想要一个带有可拖动标记的地图。如果用户拖动标记，则需要使用标记的坐标更新一些表单域。

是否有一个jQuery插件可以使用Google的v3 Maps API？

解决方案

你不需要jquery，它不会让它更容易。

首先创建您的地图并添加一个可拖动的标记。

  var myLatlng = new google.maps.LatLng （-25.363882,131.044922）; 
 var marker = new google.maps.Marker（{
 position：myLatlng，
 map：map，//地图的句柄
 draggable：true 
}） ; 
  

然后，您只需将一个事件侦听器添加到侦听标记拖动事件和更新的地图

  google.maps.event.addListener（
标记，
'drag'，
 function（）{
 document.getElementById（'lat'）。value = marker.position.lat（）; 
 document.getElementById（'lng'）。value = marker.position.lng （）; 
} 
）; 
  

http://jsfiddle.net/xTh5U/

I'm playing with google Maps and I need some directions :-)

I'd like a map with a draggable marker. If the user drags the marker some formfields need to be updated with the coordinates of the marker.

Is there a jQuery-plugin that can do this using the v3 of the Google Maps API?

解决方案

You dont need jquery, it won't make it any easier.

First create your map and add a draggable marker.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var marker = new google.maps.Marker({
    position: myLatlng, 
    map: map, // handle of the map 
    draggable:true
});

Then you just need to add an event listener to the map that listens for the marker drag event and updates the textboxes.

google.maps.event.addListener(
    marker,
    'drag',
    function() {
        document.getElementById('lat').value = marker.position.lat();
        document.getElementById('lng').value = marker.position.lng();
    }
);

http://jsfiddle.net/xTh5U/

这篇关于如何使用jQuery将可拖动标记添加到Google Map的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！