Google 地图折线双击事件

Question

我有一些示例多段线 here 我试图在每条多段线上触发双击事件。

我试过了，

 google.maps.event.addListener(poly, 'dblclick', (function (poly, i) {
    alert();
 })(poly, i));

但它仅在加载地图时发出警报。那么如何在折线上触发双击事件？

Answer 1

删除点击侦听器并像这样尝试：

google.maps.event.addListener(poly, 'dblclick', function() {
   alert("test");
});

Listener 不会同时工作 click 和 dblclick

Answer 2

两期：

您的 dblclick 侦听器没有写入的功能，警报立即运行并且其 return 值用作点击侦听器功能。
一旦信息窗口在点击侦听器上打开，它就会阻止折线，因此不会获得第二次点击

如果我移动信息窗口使其不阻止第二次点击并修复 dblclick 事件侦听器函数，它就可以工作。

proof of concept fiddle

代码片段：

（请注意，alert 在代码段中不起作用，会产生此错误：Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.）

var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  var mapOptions = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var bounds = new google.maps.LatLngBounds();
  var polygons = [];
  var arr = new Array();
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  for (var i in coordinates) {
    arr = [];

    for (var j = 0; j < coordinates[i].length; j++) {
      arr.push(new google.maps.LatLng(
        parseFloat(coordinates[i][j][0]),
        parseFloat(coordinates[i][j][1])));

      bounds.extend(arr[arr.length - 1])
    }

    var lineSymbol = {
      path: 'M 0,-1 0,1',
      strokeOpacity: 1,
      //  strokeWeight: 1,
      scale: 4
    };
    var strOp = 1;
    var icons = [];
    if (i == "feed5") {
      icons = [{
        icon: lineSymbol,
        offset: '0',
        repeat: '20px'
      }];

      strOp = 0;
    }


    // Construct the polygon.
    polygons.push(new google.maps.Polyline({
      path: arr,
      strokeColor: '#FF0000',
      strokeOpacity: strOp,
      strokeWeight: 2,
      icons: icons,
    }));
    var poly = polygons[polygons.length - 1];
    poly.setMap(map);

    google.maps.event.addListener(poly, 'dblclick', (function(poly, i) {
      return function() {
        alert();
      }
    })(poly, i));

    google.maps.event.addListener(poly, 'click', (function(poly, i) {
      return function(event) {
        infowindow.setContent("" + i);
        infowindow.setPosition(google.maps.geometry.spherical.computeOffset(event.latLng, 90, 10000));
        infowindow.open(map);
      };
    })(poly, i));



  }
  map.fitBounds(bounds);

}

google.maps.event.addDomListener(window, 'load', initialize);
  // Define the LatLng coordinates for the polygon's path.
  var coordinates = {
    "feed1": [
      [12.991838, 77.70851],
      [12.9912195, 77.707405],
      [12.989732, 77.705246],
      [12.989732, 77.70416]
    ],

    "feed2": [
      [12.999084, 77.71209],
      [13.004616, 77.71334]
    ],

    "feed3": [
      [12.993468, 77.711845],
      [12.992951, 77.71133],
      [12.992114, 77.71015],
      [12.99217, 77.708626],
      [12.991289, 77.70722],
      [12.989901, 77.70519],
      [12.989763, 77.70434]
    ],

    "feed4": [
      [13.298387, 77.55231],
      [13.297882, 77.552536],
      [13.295542, 77.55311],
      [13.293249, 77.55186],
      [13.29154, 77.551544],
      [13.290586, 77.55115],
      [13.290111, 77.54973],
      [13.288905, 77.54885],
      [13.286778, 77.54691],
      [13.28569, 77.54599],
      [13.283473, 77.54516],
      [13.28245, 77.54316],
      [13.279767, 77.54178],
      [13.278179, 77.541046],
      [13.276475, 77.540146],
      [13.276237, 77.53926]
    ],

    "feed5": [
      [13.295467, 77.55559],
      [13.296861, 77.55374],
      [13.298651, 77.55295]
    ]
  };

html,
  body,
  #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>

Google 地图折线双击事件

Google map polyline double click event

google-maps

polyline

google-polyline