Geojson 功能点击信息窗口显示触发拖动事件答案

【问题标题】：Geojson features click infowindow display triggers drag eventGeojson 功能点击信息窗口显示触发拖动事件
【发布时间】：2015-05-22 01:25:21
【问题描述】：

我对谷歌地图和数据层有疑问。当我加载包含点的 geojson 文件并将单击事件绑定到这些标记以打开信息窗口时，地图开始拖动，如您在此 sn-p 中看到的那样。

var infoWindow;
    function init(){
    // ... init map
        var lat = 45.553349634491; var lng =-73.611958006357;
      var zoom =18;

        var mapOptions = { zoom : zoom, disableDefaultUI:true, zoomControl:true, };

         map = new google.maps.Map(document.getElementById("map"), mapOptions);
         map.setCenter({lat:lat,lng:lng});
         // load geojson
         map.data.loadGeoJson("http://adam.cherti.name/CREE TA VILLE/get/poteaux.php?lat_nwest=45.55350176872861&lng_nwest=-73.61094413134936&lat_seast=45.55319749984158&lng_seast=-73.6129879746187&date=2015/5/21_21:12:01");
    
         map.data.addListener("mousedown", function(e)
         {
    
            var pos = e.latLng;
            if(!infoWindow )
                infoWindow= new google.maps.InfoWindow();
    
            infoWindow.setPosition(pos);
            var html ='hey !';
            infoWindow.setContent(html);
            infoWindow.open(map);
        });

    }
    $(document).ready(function(){init()});

<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?libraries=places&key=AIzaSyAcPswPf-CHjpRLEqDYPj7hBeycynREWpY&sensor=true"></script>

<body style="width:100%; height:100%">
  <div style="width:100%; height:500px" id="map"></div>
</body>
</html>

当点击事件被触发时，我随机尝试了一个函数 stopPropagation(event)，因为我认为它会“阻止”事件触发到地图，但它没有工作。这是func的代码：

function stopPropagation(myEvent){ 
    if(!myEvent){ 
        myEvent=window.event; 
    } 
    myEvent.cancelBubble=true; 
    if(myEvent.stopPropagation){ 
       myEvent.stopPropagation(); 
}

如果有人找到解决此问题的方法，请告诉我！

谢谢

【问题讨论】：

标签： javascript google-maps geojson

【解决方案1】：

您使用的不是click 事件，而是mousedown 事件。使用click 事件为我解决了这个问题。

var infoWindow;
    function init(){
    // ... init map
        var lat = 45.553349634491; var lng =-73.611958006357;
      var zoom =18;

        var mapOptions = { zoom : zoom, disableDefaultUI:true, zoomControl:true, };

         map = new google.maps.Map(document.getElementById("map"), mapOptions);
         map.setCenter({lat:lat,lng:lng});
         // load geojson
         map.data.loadGeoJson("http://adam.cherti.name/CREE TA VILLE/get/poteaux.php?lat_nwest=45.55350176872861&lng_nwest=-73.61094413134936&lat_seast=45.55319749984158&lng_seast=-73.6129879746187&date=2015/5/21_21:12:01");
    
         map.data.addListener("click", function(e)
         {
    
            var pos = e.latLng;
            if(!infoWindow )
                infoWindow= new google.maps.InfoWindow();
    
            infoWindow.setPosition(pos);
            var html ='hey !';
            infoWindow.setContent(html);
            infoWindow.open(map);
        });

    }
    $(document).ready(function(){init()});

<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>

<body style="width:100%; height:100%">
  <div style="width:100%; height:500px" id="map"></div>
</body>
</html>

【讨论】：