Question

我一直在使用google api，并且有几个类似的帖子，但没有任何相关的内容。我使用多边形编写了非常相似的实现，但是这个使用了draw。我在事件侦听器上收到错误<!DOCTYPE html> <html> <head> <title>HireMaster: Select Location</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { width: auto; height: 600px; } #info { position: absolute; font-family: arial, sans-serif; font-size: 18px; font-weight: bold; } </style> </head> <body> <div id="map"></div> <div id="info"> </div> <script> function initMap() { center: {lat: 38, lng: 265}, zoom: 5, mapTypeId: google.maps.MapTypeId.HYBRID var map = new google.maps.Map(document.getElementById('map'), { }); var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ ] }, markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'}, circleOptions: { fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1 } }); drawingManager.setMap(map); google.maps.event.addListener(drawingManager, "dragend", getCoords); google.maps.event.addListener(drawingManager.getPath(), "insert_at", getCoords); google.maps.event.addListener(drawingManager.getPath(), "remove_at", getCoords); google.maps.event.addListener(drawingManager.getPath(), "set_at", getCoords); } function getCoords() { var len = drawingManager.getPath().getLength(); var htmlStr = ""; for (var i = 0; i < len; i++) { var counter = i + 1; htmlStr += "Point " + counter + ": " + drawingManager.getPath().getAt(i).toUrlValue(5) + "<br>"; console.log(htmlStr); } document.getElementById('info').innerHTML = htmlStr; } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzUfosWJzaDKzYuffioH8liWWmbdPzwAQ&libraries=drawing&callback=initMap" async defer></script> </body> </html>，这没有任何意义，因为标题与它们在有效文件中的标题相同。我完全迷失了为什么这没有显示我标记它们的要点。这是我的整个代码。 JSBin：这就是我所在的地方。 http://jsbin.com/woqixir/edit?html,output 这是我在小提琴上工作的另一个片段：https://jsfiddle.net/tubbstravis/864um322/我只是想做同样的事情，但是用draw.Instead of polygon。

{{1}}

Answer 1

您正在异步加载Google Maps Javascript API：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzUfosWJzaDKzYuffioH8liWWmbdPzwAQ&libraries=drawing&callback=initMap"
     async defer></script>

但是有代码需要在回调函数（initMap）之外加载API：

google.maps.event.addListener(drawingManager, "dragend", getCoords);
google.maps.event.addListener(drawingManager.getPath(), "insert_at", getCoords);
google.maps.event.addListener(drawingManager.getPath(), "remove_at", getCoords);
google.maps.event.addListener(drawingManager.getPath(), "set_at", getCoords);

在initMap功能中移动任何依赖于Google Maps JavaScript API的代码。

与工作代码相关的问题：Google Maps API how to get the click listener to recognize drags

代码段

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 38,
      lng: 265
    },
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: []
    },
    markerOptions: {
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}


function getCoords() {
  var len = drawingManager.getPath().getLength();
  var htmlStr = "";
  for (var i = 0; i < len; i++) {
    var counter = i + 1;
    htmlStr += "Point " + counter + ": " + drawingManager.getPath().getAt(i).toUrlValue(5) + "<br>";
    console.log(htmlStr);
  }
  document.getElementById('info').innerHTML = htmlStr;

}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  width: auto;
  height: 600px;
}
#info {
  position: absolute;
  font-family: arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>
<div id="map"></div>
<div id="info"></div>

谷歌绘图没有输出点的坐标

1 个答案: