禁用左键单击谷歌地图

时间:2010-07-06 13:35:11

标签: javascript google-maps google-maps-api-3

我可以知道如何在谷歌地图上禁用双击以便在双击谷歌地图时信息窗口不会关闭吗?可以通过谷歌地图api完成吗?

6 个答案:

答案 0 :(得分:109)

您可以通过设置以下google.maps.MapOptions object property

来停用Google地图上的双击缩放功能
disableDoubleClickZoom: true

示例代码:

var mapOptions = {
    scrollwheel: false,
    disableDoubleClickZoom: true, // <---
    panControl: false,
    streetViewControl: false,
    center: defaultMapCenter
};

答案 1 :(得分:3)

如果是双击,你可以利用dblclick,只需点击一次就可以点击这一点。

runIfNotDblClick = function(fun){
    if(singleClick){
        whateverurfunctionis();
    }
};

clearSingleClick = function(fun){
    singleClick = false;
};

singleClick = false;

google.maps.event.addListener(map, 'click', function(event) {// duh! :-( google map zoom on double click!
    singleClick = true;
    setTimeout("runIfNotDblClick()", 500);
});

google.maps.event.addListener(map, 'dblclick', function(event) {// duh! :-( google map zoom on double click!
     clearSingleClick();
});

请参阅http://www.ilikeplaces.com

答案 2 :(得分:0)

你需要一个外部变量来做到这一点:

 var isDblClick;
  google.maps.event.addListener(map, 'dblclick', function (event) {
      isDblClick = true;
      myDlbClickBelovedFunction();
  });

  google.maps.event.addListener(map, 'click', function (event) {
      setTimeout("mySingleClickBelovedFunction();;", 200);
  });

function mySingleClickBelovedFunction() {
      if (!isDblClick) {
// DO MY SINGLE CLICK BUSINESS :)             
          }
 // DO NOTHING

  }

答案 3 :(得分:0)

(请考虑这不是答案,它只是像Ravindranath Akila一样已经回答的解决方案,因为在更广泛的解决方案中使用[例如移动平台]集中在一个没有全局变量的可重用方法上)

Win 8.1 Mobile应用程序也有类似的问题。感谢Ravindranath Akila我们最终确定了解决方案,该解决方案在一种方法中定义,并检查缩放和移动地图中心。无论如何有时候我们从map-click获得的地址是错误的 - 欢迎改进。

    // code
    { 
        // adding event method
        addGoogleClickEnventHandler(map, function(e) {
            // example code inside click event
            var clickLocation = e.latLng;
            getAddress(clickLocation);
        });
    }

    // function
    function addGoogleClickEnventHandler(googleEventableObject, handlingFunction) {

    var boundsChanged = false;
    var centerChanged = false;
    var singleClick = false;

    function runIfNotDblClick(obj) {
        if(singleClick && !boundsChanged && !centerChanged){
            handlingFunction(obj);
        }
    };

    googleEventableObject.addListener('bounds_changed', function () { boundsChanged = true; });
    googleEventableObject.addListener('center_changed', function () { centerChanged = true; });
    googleEventableObject.addListener('dblclick', function () { singleClick = false; });

    googleEventableObject.addListener('click', function(obj) {
       singleClick = true;
       setTimeout(function() {
                runIfNotDblClick(obj);
            }, 200);            
        boundsChanged = false;
        centerChanged = false;
    });
    }

答案 4 :(得分:0)

这是一个提供实时预览坐标的示例。

单击一次将保存坐标,而双击则将放置标记。

请记住注册并创建密钥,并将其粘贴到提示位置 src脚本中的YOUR-API-KEY
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap

enter image description here

<html>
<head>
    <title>Google Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>          
      #map { 
        height: 300px;    
        width: 600px;            
      }          
    </style>        
</head>    
<body>
    <div id="latclicked"></div>
    <div id="longclicked"></div>

    <div id="latmoved"></div>
    <div id="longmoved"></div>

    <div style="padding:10px">
        <div id="map"></div>
    </div>

    <script type="text/javascript">
    let map;

    function initMap() {                            
        let latitude = 27.7172453; // YOUR LATITUDE VALUE
        let longitude = 85.3239605; // YOUR LONGITUDE VALUE

        let myLatLng = {lat: latitude, lng: longitude};

        map = new google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          zoom: 14,
          disableDoubleClickZoom: true, // disable the default map zoom on double click
        });

        // Update lat/long value of div when anywhere in the map is clicked    
        google.maps.event.addListener(map,'click',function(event) {                
            document.getElementById('latclicked').innerHTML = event.latLng.lat();
            document.getElementById('longclicked').innerHTML =  event.latLng.lng();
        });

        // Update lat/long value of div when you move the mouse over the map
        google.maps.event.addListener(map,'mousemove',function(event) {
            document.getElementById('latmoved').innerHTML = event.latLng.lat();
            document.getElementById('longmoved').innerHTML = event.latLng.lng();
        });

        let marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          //title: 'Hello World'

          // setting latitude & longitude as title of the marker
          // title is shown when you hover over the marker
          title: latitude + ', ' + longitude 
        });    

        // Update lat/long value of div when the marker is clicked
        marker.addListener('click', function(event) {              
          document.getElementById('latclicked').innerHTML = event.latLng.lat();
          document.getElementById('longclicked').innerHTML =  event.latLng.lng();
        });

        // Create new marker on double click event on the map
        google.maps.event.addListener(map,'dblclick',function(event) {
            let marker = new google.maps.Marker({
              position: event.latLng, 
              map: map, 
              title: event.latLng.lat()+', '+event.latLng.lng()
            });

            // Update lat/long value of div when the marker is clicked
            marker.addListener('click', function() {
              document.getElementById('latclicked').innerHTML = event.latLng.lat();
              document.getElementById('longclicked').innerHTML =  event.latLng.lng();
            });            
        });

        // Create new marker on single click event on the map
        /*google.maps.event.addListener(map,'click',function(event) {
            let marker = new google.maps.Marker({
              position: event.latLng, 
              map: map, 
              title: event.latLng.lat()+', '+event.latLng.lng()
            });                
        });*/
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
    async defer></script>
</body>    

答案 5 :(得分:-10)

无法完成,您基本上必须阻止或阻止事件发生。

你可以尝试类似于EXT JS中的createInterceptor()。这将在事件触发之前触发,并且您可以返回false以防止实际事件触发,但我不确定它是否会阻止代码在该代码中触发事件之前执行。