Javascript Google map api v3-单击事件后不会触发事件拖拽标记
我有一个表格,有两个输入文本,分别表示纬度和经度。Javascript Google map api v3-单击事件后不会触发事件拖拽标记,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我有一个表格,有两个输入文本,分别表示纬度和经度。 如果我在Google Map API上拖放标记,则输入中的值将更改 如果我点击地图,它也会改变 但是,在此单击事件之后,拖放动画和行为良好,但我的事件从未触发,因此值根本不会更改 我只找到了一个关于“拖放和单击冲突”的线程,但没有找到任何解决方案 这是我的代码: function launchMap(latitude, longitude, markerMap, zoom) { mapLaunch = true;
如果我在Google Map API上拖放标记,则输入中的值将更改
如果我点击地图,它也会改变 但是,在此单击事件之后,拖放动画和行为良好,但我的事件从未触发,因此值根本不会更改 我只找到了一个关于“拖放和单击冲突”的线程,但没有找到任何解决方案 这是我的代码:
function launchMap(latitude, longitude, markerMap, zoom) {
mapLaunch = true;
var marker, map, latlng, image= '../Images/eolienne_marker_white.png', title = 'Site';
function initMap() {
var latlngOk = true;
if (latitude === null || latitude === 'undefined' || latitude == 'null') {
latlngOk = false;
}
if (longitude === null || longitude === 'undefined' || latitude == 'null') {
latlngOk = false;
}
if (latlngOk === true) {
latlng = new google.maps.LatLng(latitude, longitude);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: latlng,
zoom: zoom,
draggable: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
if (markerMap === true) {
marker = new google.maps.Marker({
position: latlng,
icon: image,
map: map,
draggable: true,
title: title
});
}
}
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
google.maps.event.addListener(map, 'click', function (event) {
if (markerMap === true) {
marker.setMap(null);
}
markerMap = true;
marker = new google.maps.Marker({
position: event.latLng,
icon: image,
map: map,
draggable: true,
title: title
});
map.panTo(event.latLng);
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
});
google.maps.event.addListener(marker, 'drag', function (event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
});
}
google.maps.event.addDomListener(window, "load", initMap);
}
谢谢你的帮助
编辑:
解决方案是将拖动事件添加到每个创建的标记中。在我上面的代码中,有一个地方我创建了一个标记,而没有添加侦听器。您可以看到下面的新代码运行良好
function launchMap(latitude, longitude, markerMap, zoom) {
mapLaunch = true;
var marker, map, latlng, image= '../Images/eolienne_marker_white.png', title = 'Site';
function initMap() {
var latlngOk = true;
if (latitude === null || latitude === 'undefined' || latitude == 'null') {
latlngOk = false;
}
if (longitude === null || longitude === 'undefined' || latitude == 'null') {
latlngOk = false;
}
if (latlngOk === true) {
latlng = new google.maps.LatLng(latitude, longitude);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: latlng,
zoom: zoom,
draggable: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
if (markerMap === true) {
marker = new google.maps.Marker({
position: latlng,
icon: image,
map: map,
draggable: true,
title: title
});
// Call the new function for this first marker
googleMapsEventDrag(marker);
}
}
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
google.maps.event.addListener(map, 'click', function (event) {
if (markerMap === true) {
marker.setMap(null);
}
markerMap = true;
marker = new google.maps.Marker({
position: event.latLng,
icon: image,
map: map,
draggable: true,
title: title
});
// Call the new function for this second marker
googleMapsEventDrag(marker);
map.panTo(event.latLng);
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
});
}
google.maps.event.addDomListener(window, "load", initMap);
}
// New function (because calling multiple times)
function googleMapsEventDrag(marker){
google.maps.event.addListener(marker, 'drag', function (event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
});
}
您正在为创建的第一个标记添加拖动事件侦听器。但这并不意味着您为响应贴图单击而创建的标记也会自动继承该拖动事件侦听器。每次添加标记以响应映射单击时,都需要添加单独的事件侦听器 我认为这应该奏效:
函数启动映射(纬度、经度、标记映射、缩放){
var marker,map,latlng,image='../Images/eolienne_marker_white.png',title='Site';
函数initMap(){
var latlngOk=真;
如果(纬度===null | |纬度==='undefined'| |纬度=='null'){
latlngOk=假;
}
如果(经度===null | |经度==='undefined'| |纬度=='null'){
latlngOk=假;
}
如果(latlngOk==真){
latlng=新的google.maps.latlng(纬度、经度);
map=new google.maps.map(document.getElementById('map_canvas'){
中心:拉特林,
缩放:缩放,
真的,
mapTypeId:google.maps.mapTypeId.ROADMAP
});
if(markerMap==true){
marker=新的google.maps.marker({
位置:latlng,
图标:图像,
地图:地图,
真的,
标题:标题
});
google.maps.event.addListener(标记'drag',markerDrag);
}
google.maps.event.addDomListener(窗口,“调整大小”,函数(){
var center=map.getCenter();
google.maps.event.trigger(map,“resize”);
地图设置中心(中心);
});
google.maps.event.addListener(映射,'click',函数(事件){
if(markerMap==true){
marker.setMap(空);
}
markerMap=true;
marker=新的google.maps.marker({
位置:event.latLng,
图标:图像,
地图:地图,
真的,
标题:标题
});
panTo地图(事件时间);
google.maps.event.addListener(标记'drag',markerDrag);
});
}
}
google.maps.event.addDomListener(窗口“加载”,initMap);
}
函数标记符(事件){
document.getElementById('lat')。value=event.latLng.lat();
document.getElementById('lng')。value=event.latLng.lng();
}
请提供一份说明问题的报告。markerMap
如何设置为false?你是对的,谢谢。我需要在地图上的每个新标记附近添加拖动事件-在我的代码中为-2。使用函数调用事件是最好的方法(你可以从我的问题的“编辑”部分看到好的代码。谢谢你的帮助!!