试图添加一个右键单击删除标记功能,工作左键单击添加标记代码 [英] Trying to add a right-click delete marker function, to working left-click add marker code

查看:110
本文介绍了试图添加一个右键单击删除标记功能,工作左键单击添加标记代码的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你好,并提前致谢。以下修改后的示例谷歌代码在鼠标左键单击时创建标记,并将这些标记添加到数组中。这部分工作正常。我试图添加第二个事件处理程序,如果右键单击它,删除标记。我已经尝试了很多变化而没有成功。我的理解是使用marker.setMap(null)会将关联的数组元素设置为null,并从显示中删除标记。再次感谢!

 <!DOCTYPE html> 
< html>
< head>
< title>标记测试< /标题>

< style>
html,body {
height:100%;
保证金:0;
padding:0;
}

#map-canvas,#map_canvas {
height:100%;
}

#map-canvas,#map_canvas {
height:650px;
}
< / style>

< script src =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>

< script>
var map;
var markers = [];

函数initialize(){
var NY = new google.maps.LatLng(40.739112,-73.785848);
var mapOptions = {
zoom:16,
center:NY,
mapTypeId:google.maps.MapTypeId.TERRAIN
}
map = new google .maps.Map(的document.getElementById( '地图画布'),的MapOptions);

google.maps.event.addListener(map,'click',function(event){
addMarker(event.latLng);
});

google.maps.event.addListener(map,'rightclick',function(event){
marker.setMap(null);
});


函数addMarker(location){
var marker = new google.maps.Marker({
position:location,
map:map
});

markers.push(marker);
}

google.maps.event.addDomListener(window,'load',initialize);

< / script>

< / head>
< body>
< div id =map-canvas>< / div>
< / body>
< / html>


解决方案

您希望标记上的'rightclick'事件侦听器,而不是地图。把它放在addMarker函数中:

pre $ function $ addMarker(location){
var marker = new google.maps.Marker ({
position:location,
map:map
});
google.maps.event.addListener(marker,'rightclick',function(event){
marker.setMap(null);
});

markers.push(marker);
}

注意:这会从地图上移除标记,但不会移除它来自标记数组。



删除地图上的一个,删除这些行:

  google.maps.event.addListener(map,'rightclick',function(event){
marker.setMap(null);
});


Hello and thanks in advance. The following modified sample google code creates markers upon left mouse clicks, and adds those markers to an array. That part works fine. I have tried to add a second event handler that deletes a marker if there is a right click on it. I've tried a lot of variations without success. It is my understanding that the use of marker.setMap(null) would set the associated array element to null, and remove the marker from the display. Thanks again!

<!DOCTYPE html>
<html>
<head>
<title>Marker Test</title>

<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map-canvas, #map_canvas {
    height: 100%;
}

#map-canvas, #map_canvas {
    height: 650px;
}
</style>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script>
var map;
var markers = [];

function initialize() {
    var NY = new google.maps.LatLng(40.739112,-73.785848);
    var mapOptions = {
        zoom: 16,
        center: NY,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {
                addMarker(event.latLng);
    });

    google.maps.event.addListener(map, 'rightclick', function(event) {
                marker.setMap(null);
    });
}

function addMarker(location) {
        var marker = new google.maps.Marker({
        position: location,
        map: map
    });

    markers.push(marker);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

解决方案

You want the 'rightclick' event listener on the marker, not the map. Put it in the addMarker function:

function addMarker(location) {
        var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    google.maps.event.addListener(marker, 'rightclick', function(event) {
        marker.setMap(null);
    });

    markers.push(marker);
}

Note: this will remove the marker from the map, but won't remove it from the markers array.

Remove the one on the map, delete these lines:

google.maps.event.addListener(map, 'rightclick', function(event) {
            marker.setMap(null);
});

这篇关于试图添加一个右键单击删除标记功能,工作左键单击添加标记代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆