Google Maps API v3 - Mousemove和Click事件组合 [英] Google Maps API v3 - Mousemove and Click event Combo

问题描述

如果我将一个点击事件连接到我的地图，然后挂钩了一个mousemove事件，则click事件不再起作用。我不认为有人知道这件事吗？这是在3.4版本的方式。

一个简单的例子：

  var map; 
函数initialize（）{
 
 var myLatlng = new google.maps.LatLng（-34.397,150.644）; 
 var myOptions = {
 zoom：8，
 center：myLatlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 
 map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 var secondClick = false; 
 var firstClick = false; 
 var firstClickLatLng; 
 var secondClickLatLng; 
 var lines = []; 
 
 google.maps.event.addListener（map，'mousemove'，function（event）{
 redrawLine（event）; 
}）; 
 
 google.maps.event.addListener（map，'click'，function（event）{
 if（！firstClick&&！secondClick）{
 firstClick = true ; 
 firstClickLatLng = event.latLng; 
} 
 else if（firstClick&&！secondClick）{
 secondClick = true; 
 firstClick = false; 
 //在此处绘制折线
 secondClickLatLng = event.latLng; 
 
 //google.maps.event.removeListener (listener）; 
} 
 else if （！firstClick&&secondClick）{
 secondClick = false; 
 //在此清除折线
 alert（what）; 
 //google.maps.event .removeListener（listener）; 
} 
}）; 
 
函数redrawLine（事件）{
 if（firstClickLatLng！= null）{
 var lineCoords = [
 firstClickLatLng，
 event.latLng 
]; 
 
 var line = new google.maps.Polyline（{
 path：lineCoords，
 strokeColor：＃FF0000，
 strokeOpacity：1.0，
 strokeWeight：2 
}）; 
 
 //您需要清除前一行，否则
 //会绘制负载和线条负载。我做了这个
 //以防因为某种原因无法清除之前的
 // //。 
 for（var i = 0; i< lines.length; i ++）{
 lines [i] .setMap（null）; 
} 
 
 line.setMap（map）; 
 lines.push（line）; 
 
 
 
 
 
 $ b因此，每当你移动鼠标。问题是，如果我第二次点击，点击事件不会触发。
 
 
 
想法？
 
 
 
 编辑 
 
 
 
此问题相关： http://www.mail-archive.com/[e-mail]/msg15878。 HTML  
 
 
 
虽然它并没有明确地解决我的问题，但其他人已经测试并体验过这种感觉。
解决方案
排序，如链接所示，您需要声明可点击：false  
 
 
  http://code.google.com/apis/maps/documentation/javascript/reference.html#PolylineOptions  
 
If I've got a click event hooked up to my map, and then I hook up a mousemove event, the click event no longer works.  I don't suppose anyone knows anything about this? This is in version 3.4 by the way.

As a simple example:
var map;
function initialize() {

    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var secondClick = false;
    var firstClick = false;
    var firstClickLatLng;
    var secondClickLatLng;
    var lines = [];

    google.maps.event.addListener(map, 'mousemove', function (event) {
        redrawLine(event);
    });

    google.maps.event.addListener(map, 'click', function (event) {
        if (!firstClick && !secondClick) {
            firstClick = true;
            firstClickLatLng = event.latLng;
        }
        else if (firstClick && !secondClick) {
            secondClick = true;
            firstClick = false;
            // draw the polyline here
            secondClickLatLng = event.latLng;

            //google.maps.event.removeListener(listener);
        }
        else if (!firstClick && secondClick) {
            secondClick = false;
            // clear the polyline here
            alert("what");
            //google.maps.event.removeListener(listener);
        }
    });

    function redrawLine(event) {
        if (firstClickLatLng != null) {
            var lineCoords = [
                firstClickLatLng,
                event.latLng
            ];

            var line = new google.maps.Polyline({
                path: lineCoords,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            });

            // You need to clear the previous line, otherwise
            // it draws loads and loads of lines.  I did this
            // in case it doesn't manage to clear the previous
            // one for some reason.
            for (var i = 0; i < lines.length; i++) {
                lines[i].setMap(null);
            }

            line.setMap(map);
            lines.push(line);
        }
    }
}
So a line is drawn for whenever you move the mouse.  The problem is that if I were to click for the second time, the click event will not fire.

Ideas?

EDIT

This issue is related: http://www.mail-archive.com/[e-mail]/msg15878.html

It doesn't explicitly solve my problem though, but others have tested and experienced this.
解决方案
Sorted, as that link showed, you need to state clickable: false

http://code.google.com/apis/maps/documentation/javascript/reference.html#PolylineOptions

                        
这篇关于Google Maps API v3  -  Mousemove和Click事件组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！