代码之家 › 专栏 › 技术社区 › davidlee

禁用双击谷歌地图

google-maps-api-3 google-maps javascript

davidlee · 技术社区 · 14 年前

5 回复 | 直到 9 年前

118

user664833 Ronen Rabinovici 10 年前

通过设置以下选项,可以在Google地图上禁用双击缩放 google.maps.MapOptions object property :

disableDoubleClickZoom: true

示例代码:

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

Ravindranath Akila 13 年前

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

thennebelle 12 年前

您需要一个外部var来实现这一点:

 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

  }

Václav Å vára 9 年前

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

Win8.1移动应用程序也有类似的问题。感谢Ravindranath Akila,我们最终确定了一种方法中定义的解决方案,并检查地图中心的缩放和移动。不管怎样,有时我们从地图点击得到的地址是错误的-欢迎改进。

    // 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;
    });
    }

Rami Nour 5 年前

当您单击一次时,它将保存cordinate,当您双击时,它将放置一个标记。

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

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

-10

CrazyEnigma 14 年前

这是不可能的,你必须阻止或阻止事件的发生。

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