个人中心
gpt4 book ai didi

javascript - Google Maps API Drawing Polygon - overlaycomplete 事件只返回一组坐标？

转载 作者：行者123 更新时间：2023-11-29 21:21:56 25 4
gpt4 key购买 nike

我有一个形状创建时的事件监听器:

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.872, lng: 151.252},
    zoom: 6
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT,
      drawingModes: []
    },
    polygonOptions: {
      fillColor: 'rgba(255, 0, 0, 0.2)',
      fillOpacity: 1,
      strokeWeight: 2,
      clickable: true,
      editable: true,
      zIndex: 1
    }    
  });
  
  drawingManager.setMap(map);
  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -25.364, lng: 155.207}, // north west
    {lat: -35.364, lng: 155.207}, // south west
    {lat: -35.364, lng: 148.207}, // south east
    {lat: -25.364, lng: 148.207}  // north east
  ];


  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords])});
  
  
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if(event.type == 'polygon') {
       var verticles = event.overlay.getPaths();
      
      verticles.forEach(function(verticle, ind){
      console.log({
        "index": ind,
        "lat": verticle.getAt(ind).lat(),
        "lng": verticle.getAt(ind).lng(),
        "obj": verticle.getAt(ind)
      });        
      });
    }
  
  
});  
  
  
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }
    #map {
      height: 100%;
    }
  </style>
</head>
<body>
<div id="map"></div>
<div id="capture"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFOolEMjIlnlkVle8gsiDA1ym3aktxEGc&libraries=drawing&callback=initMap"
         async defer></script>
</body>
</html>

但是，.getPaths() 似乎只返回一组经纬度，无论我的多边形由多少条线组成。从文档来看，它似乎应该返回一个对象数组，其中每个对象都是绘制线所需的两个点 (lat/lng) 的数组。我错过了什么？

最佳答案

改变

var verticles = event.overlay.getPaths();

为此:

var verticles = event.overlay.getPath().getArray()

关于javascript - Google Maps API Drawing Polygon - overlaycomplete 事件只返回一组坐标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38347014/

25 4 0
文章推荐： javascript - onchange 不会改变 AngularJS View 中的 $scope
文章推荐： javascript - 如何仅使用 Angular 中的 ng-options 来转换值
文章推荐： javascript - 在 ES6 中创建的每个新实例中传递单独的范围
文章推荐： android - 如何在 android 中使用社交身份验证访问 facebook 好友列表？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com