Google Maps API如何让点击侦听器识别拖动 [英] Google Maps API how to get the click listener to recognize drags

查看：102
本文介绍了Google Maps API如何让点击侦听器识别拖动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在Google地图上创建一个可编辑的多边形，在更改时返回多边形的地理坐标。在下面的JS Fiddle中，你会注意到如果你创建了一个三角形，然后拖动其中的一个点，那么事件监听器就不会选择点击;但当然，如果你再次点击这个点，它会识别它。



有没有什么办法可以将事件监听器添加到谷歌地图中，​​以查看多边形的拖动事件？



http://jsfiddle.net/ mclean25 / pnc4ttb0 / 5 /

HTML 

  < div id =map_canvasstyle =width：500px; height：450px;>< / div> 
< textarea height =100wid name =verticesvalue =id =vertices>< / textarea>

Javascript 

  var map; //地图的全局声明
 var iw = new google.maps.InfoWindow（）; // infowindow的全局声明
 var lat_longs = new Array（）; 
 var markers = new Array（）; 
 var drawingManager; 
函数initialize（）{
 var myLatlng = new google.maps.LatLng（40.9403762，-74.1318096）; 
 var myOptions = {
 zoom：13，
 center：myLatlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP} 
 map = new google.maps.Map （document.getElementById（map_canvas），myOptions）; 
 drawingManager = new google.maps.drawing.DrawingManager（{
 drawingMode：google.maps.drawing.OverlayType.POLYGON，
 drawingControl：true，
 drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
 drawingModes：[google.maps.drawing.OverlayType.POLYGON] 
}，
 polygonOptions：{
 editable：true 
} 
 
}）; 
 drawingManager.setMap（map）; 
 
 google.maps.event.addListener（drawingManager，overlaycomplete，function（event）{
 var newShape = event.overlay; 
 newShape.type = event.type; 
}）; 
 
 google.maps.event.addListener（drawingManager，overlaycomplete，function（event）{
 overlayClickListener（event.overlay）; 
 var values = event.overlay.getPath （）.getArray（）; 
 for（var i = 0; i< values.length; i ++）{
 //console.log（\"lat：，values [i] .lat ））; 
 //console.log(\"lng:\"，values [i] .lng（））; 
} 
 $（'＃vertices'）。val（event.overlay .getPath（）。getArray（））; 
}）; 
} 
 
 function overlayClickListener（overlay）{
 google.maps.event.addDomListener（overlay，click，function（event）{
 console.log ）改变这个人！）; 
 $（'＃vertices'）。val（overlay.getPath（）。getArray（））; 
}）; 
 
 
 initialize（）; 
 
 $（function（）{
 $（'＃save'）。click（function（）{
 
 //迭代多边形顶点？
 }）; 
}）;


解决方案

如果要捕获多边形，您需要在多边形的路径上设置事件侦听器。对于简单的多边形（只有一条路径，没有孔，只有绘图管理器可以很容易地创建这些孔），这将起作用： 

  var overlay; 
 google.maps.event.addListener（drawingManager，overlaycomplete，function（event）{
 $（'＃vertices'）.val（event.overlay.getPath（）。getArray（））; 
 overlay = event.overlay; //保存对多边形的引用
 //新的顶点侦听器
 google.maps.event.addListener（event.overlay.getPath（），'insert_at' ，getCoordinates）; 
 //移动顶点侦听器
 google.maps.event.addListener（event.overlay.getPath（），'set_at'，getCoordinates）; 
}）; 
函数getCoordinates（index，element）{
 $（'＃vertices'）。val（overlay.getPath（）。getArray（））; 
}

相关问题：用于编辑Google Maps Polyline的事件处理程序？

< >代码段：
$ b

var map; // mapvar的全局声明iw = new google.maps.InfoWindow（）; //全局声明infowindowvar lat_longs = new Array（）; var markers = new Array（）; var drawingManager; var overlay; function initialize（）{var myLatlng = new google.maps.LatLng（40.9403762，-74.1318096）; var myOptions = {zoom：13，center：myLatlng，mapTypeId：google.maps.MapTypeId.ROADMAP} map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; drawingManager = new google.maps.drawing.DrawingManager（{drawingMode：google.maps.drawing.OverlayType.POLYGON，drawingControl：true，drawingControlOptions：{position：google.maps.ControlPosition.TOP_CENTER，drawingModes：[google.maps.drawing。 OverlayType.POLYGON]}，polygonOptions：{editable：true}}）; drawingManager.setMap（地图）; google.maps.event.addListener（drawingManager，overlaycomplete，function（event）{var newShape = event.overlay; newShape.type = event.type;}）; google.maps.event.addListener（drawingManager，overlaycomplete，function（event）{google.maps.event.addListener（event.overlay，'click'，function（evt）{overlay = this; getCoordinates（）;}） $（'＃vertices'）。val（event.overlay.getPath（）。getArray（））; overlay = event.overlay; google.maps.event.addListener（event.overlay.getPath（），'insert_at'，getCoordinates ）; google.maps.event.addListener（event.overlay.getPath（），'remove_at'，getCoordinates）; google.maps.event.addListener（event.overlay.getPath（），'set_at'，getCoordinates）;}） ;} function getCoordinates（index，element）{$（'＃vertices'）.val（overlay.getPath（）。getArray（））;} function overlayClickListener（overlay）{google.maps.event.addListener（overlay，click ，function（event）{console.log（Changing this guy！）; overlay = this; $（'＃vertices'）.val（overlay.getPath（）。getArray（））;}）;} initialize（） ）; $（function（）{$（'＃save'）。click（function（）{//迭代多边形顶点？}） ;}）;

#vertices {height：100px; width：500px;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =http://maps.google.com/maps/ api / js？libraries = drawing>< / script>< div id =map_canvasstyle =width：500px; height：450px;>< / div>< textarea name =vertices value =id =vertices>< / textarea>

I'm trying to create an editable polygon in google maps that on change, returns the Geo Coordinates of the polygon. At the following JS Fiddle, you'll notice if you create a triangle, and then drag one of the points, the event listener doesn't pick up the click; but of course, if you click the point again it will recognize it.

Is there any way to add an event listener to google maps for "drag" events of the polygon?

http://jsfiddle.net/mclean25/pnc4ttb0/5/

HTML

<div id="map_canvas" style="width:500px; height:450px;"></div>
<textarea height="100" wid name="vertices" value="" id="vertices"  ></textarea>

Javascript

var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var drawingManager;
function initialize() {
     var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP}
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    },
            polygonOptions: {
                editable: true
            }

    });
    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
        var newShape = event.overlay;
        newShape.type = event.type;
    });

    google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
        overlayClickListener(event.overlay);
        var values = event.overlay.getPath().getArray();
        for (var i = 0; i < values.length; i++){
            //console.log("lat:", values[i].lat());
            //console.log("lng:", values[i].lng());
        }
        $('#vertices').val(event.overlay.getPath().getArray());
    });
}

function overlayClickListener(overlay) {
  google.maps.event.addDomListener(overlay, "click", function(event){
        console.log("Changing this guy!");
    $('#vertices').val(overlay.getPath().getArray());
  });

}
initialize();

$(function(){
    $('#save').click(function(){

        //iterate polygon vertices?
    });
});

解决方案

If you want to capture changes in the vertices of the polygon, you need to set event listeners on the path of the polygon. For simple polygons (with only one path, no holes, the only ones that are easy to create with the drawing manager), this will work:

var overlay;
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
  $('#vertices').val(event.overlay.getPath().getArray());
  overlay = event.overlay;  // save a reference to the polygon
  // new vertex listener
  google.maps.event.addListener(event.overlay.getPath(), 'insert_at', getCoordinates); 
  // move vertex listener
  google.maps.event.addListener(event.overlay.getPath(), 'set_at', getCoordinates); 
});
function getCoordinates(index, element) {
  $('#vertices').val(overlay.getPath().getArray());
}

Related question: Event handler for editing a Google Maps Polyline?

code snippet:

var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var drawingManager;
var overlay;


function initialize() {
  var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
  var myOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    },
    polygonOptions: {
      editable: true
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    var newShape = event.overlay;
    newShape.type = event.type;
  });

  google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    google.maps.event.addListener(event.overlay, 'click', function(evt) {
      overlay = this;
      getCoordinates();
    })

    $('#vertices').val(event.overlay.getPath().getArray());
    overlay = event.overlay;
    google.maps.event.addListener(event.overlay.getPath(), 'insert_at', getCoordinates);
    google.maps.event.addListener(event.overlay.getPath(), 'remove_at', getCoordinates);
    google.maps.event.addListener(event.overlay.getPath(), 'set_at', getCoordinates);
  });
}

function getCoordinates(index, element) {
  $('#vertices').val(overlay.getPath().getArray());
}

function overlayClickListener(overlay) {
  google.maps.event.addListener(overlay, "click", function(event) {
    console.log("Changing this guy!");
    overlay = this;
    $('#vertices').val(overlay.getPath().getArray());
  });
}
initialize();

$(function() {
  $('#save').click(function() {

    //iterate polygon vertices?
  });
});

#vertices {
  height: 100px;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=drawing"></script>
<div id="map_canvas" style="width:500px; height:450px;"></div>
<textarea name="vertices" value="" id="vertices"></textarea>

这篇关于Google Maps API如何让点击侦听器识别拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆