如何在Google Maps API v3中同时拖动标记并点击进行设置？ [英] How to drag marker and click to set at the same time in Google Maps API v3?
本文介绍了如何在Google Maps API v3中同时拖动标记并点击进行设置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Google Maps API v3的新成员，我正在尝试添加点击事件侦听器来重新设置标记，但我希望可以拖动标记。
其实我只能拖动标记，这是我的代码：
var lat = null;
var lng = null;
var map = null;
var geocoder = null;
var marker = null;
jQuery（document）.ready（function（）{
lat = jQuery（'＃lat'）。val（）;
lng = jQuery（'＃long'） .val（）;
jQuery（'＃pasar'）。click（function（）{
codeAddress（）;
return false;
}）;
initialize （）;
}）;
函数initialize（）{
geocoder = new google.maps.Geocoder（）;
if（lat！=''&& lng！=''）
{
var latLng = new google.maps.LatLng（lat，lng）;
}
else
{
var latLng = new google.maps.LatLng（11.027113，-63.862023）;
}
var myOptions = {
center：latLng，
zoom：15，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
marker = new google.maps.Marker（{
map：map，
position：latLng，
draggable：true
}）;
updatePosition（latLng）;
$ b函数codeAddress（）{
var address = document.getElementById（direccion）.value;
geocoder.geocode（{'address'：address}，function（results，status）{
$ b $ if（status == google.maps.GeocoderStatus.OK）{
map .setCenter（results [0] .geometry.location）;
marker.setPosition（results [0] .geometry.location）;
updatePosition（results [0] .geometry.location）;
google.maps.event.addListener（marker，'dragend'，function（）{
updatePosition（marker.getPosition（））;
}）;
} else {
alert（No podemos encontrar la direccion，error：+ status）;
}
}）;
函数updatePosition（latLng）
{
jQuery（'＃lat'）。val（latLng.lat（））;
jQuery（'＃long'）。val（latLng.lng（））;
}
我试着添加下面的代码：
myListener = google.maps.event.addListener（map，'click'，function（event）{
if（marker）{ marker.setMap（null）}
placeMarker（event.latLng）;
google.maps.event.removeListener（myListener）;
}）;
但它不起作用。
我希望将标记放在两个选项中，拖动并单击。我如何在我的代码中实现这一目标？
Thanks！
解决方案
代码中没有placeMarker函数，并且不确定为什么只需要放置标记在地图上的第一次点击（您将在此之后删除监听器）。这是我认为你想要的：
var lat = null; var lng = null; var map = null; var geocoder = null; var标记=空; var myListener = null; jQuery（document）.ready（function（）{lat = jQuery（'＃lat'）.val（）; lng = jQuery（'＃long'）.val（）; jQuery （）;}};函数初始化（）{geocoder = new google.maps.Geocoder（）;} if（lat！=''&& lng！=''）{var latLng = new google.maps.LatLng（lat，lng）; } else {var latLng = new google.maps.LatLng（11.027113，-63.862023）; } var myOptions = {center：latLng，zoom：15，mapTypeId：google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; marker = new google.maps.Marker（{map：map，position：latLng，draggable：true}）; google.maps.event.addListener（marker，'dragend'，function（）{updatePosition（marker.getPosition（））;}）; updatePosition（的latLng）; google.maps.event.addListener（map，'click'，function（event）{if（marker）{marker.setPosition（event.latLng）} else {marker = new google.maps.Marker（{map：map，position ：event.latLng，draggable：true}）;} updatePosition（event.latLng）;}）;} function codeAddress（）{var address = document.getElementById（direccion）.value; geocoder.geocode（{'address'：address}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{map.setCenter（results [0] .geometry.location）; marker.setPosition （results [0] .geometry.location）; updatePosition（results [0] .geometry.location）; google.maps.event.addListener（marker，'dragend'，function（）{updatePosition（marker.getPosition（））; }};} else {alert（No podemos encontrar la direccion，error：+ status）;}}）;}函数updatePosition（latLng）{jQuery（'＃lat'）.val（latLng.lat（））; jQuery（'＃long'）。val（latLng.lng（））;}
html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//
I'm new in Google Maps API v3, I'm trying to add click event listener to re-set the marker, but I want have the posibility to drag the marker too.
Actually I only can drag the marker, this is my code:
var lat = null;
var lng = null;
var map = null;
var geocoder = null;
var marker = null;
jQuery(document).ready(function(){
lat = jQuery('#lat').val();
lng = jQuery('#long').val();
jQuery('#pasar').click(function(){
codeAddress();
return false;
});
initialize();
});
function initialize() {
geocoder = new google.maps.Geocoder();
if(lat !='' && lng != '')
{
var latLng = new google.maps.LatLng(lat,lng);
}
else
{
var latLng = new google.maps.LatLng(11.027113, -63.862023);
}
var myOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: latLng,
draggable: true
});
updatePosition(latLng);
}
function codeAddress() {
var address = document.getElementById("direccion").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
updatePosition(results[0].geometry.location);
google.maps.event.addListener(marker, 'dragend', function(){
updatePosition(marker.getPosition());
});
} else {
alert("No podemos encontrar la direccion, error: " + status);
}
});
}
function updatePosition(latLng)
{
jQuery('#lat').val(latLng.lat());
jQuery('#long').val(latLng.lng());
}
I tried to add the following code:
myListener = google.maps.event.addListener(map, 'click', function(event) {
if(marker){marker.setMap(null)}
placeMarker(event.latLng);
google.maps.event.removeListener(myListener);
});
But it does not work. I want to place the marker with both options, dragging and click. How I can achieve that in my code? Thanks!
解决方案
There is no placeMarker function in your code, and not sure why you only want the marker placed on the first click on the map (you are removing the listener after that). This is what I think you want:
var lat = null;
var lng = null;
var map = null;
var geocoder = null;
var marker = null;
var myListener = null;
jQuery(document).ready(function() {
lat = jQuery('#lat').val();
lng = jQuery('#long').val();
jQuery('#pasar').click(function() {
codeAddress();
return false;
});
initialize();
});
function initialize() {
geocoder = new google.maps.Geocoder();
if (lat != '' && lng != '') {
var latLng = new google.maps.LatLng(lat, lng);
} else {
var latLng = new google.maps.LatLng(11.027113, -63.862023);
}
var myOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: latLng,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function() {
updatePosition(marker.getPosition());
});
updatePosition(latLng);
google.maps.event.addListener(map, 'click', function(event) {
if (marker) {
marker.setPosition(event.latLng)
} else {
marker = new google.maps.Marker({
map: map,
position: event.latLng,
draggable: true
});
}
updatePosition(event.latLng);
});
}
function codeAddress() {
var address = document.getElementById("direccion").value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
updatePosition(results[0].geometry.location);
google.maps.event.addListener(marker, 'dragend', function() {
updatePosition(marker.getPosition());
});
} else {
alert("No podemos encontrar la direccion, error: " + status);
}
});
}
function updatePosition(latLng) {
jQuery('#lat').val(latLng.lat());
jQuery('#long').val(latLng.lng());
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="lat" value="42" />
<input id="long" value="-85" />
<input id="pasar" type="button" value="geocode" />
<input id="direccion" value="New York, NY" />
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
这篇关于如何在Google Maps API v3中同时拖动标记并点击进行设置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
