无法加载图形库(Google Maps)



我想将Google Maps与绘图模式使用。

这是我的视图代码:

   <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon Arrays</title>
    <link rel="stylesheet" type="text/css" href="assets/css/sitecss">
  </head>
  <body>
    <div id="map">
      <div id="mapDiv" class="map"></div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="assets/js/test.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=**********&callback=initMap&libraries=drawing" ></script>
  </body>
</html>

我需要添加绘图模式到映射,这是我的脚本

 function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: {lat: 24.886, lng: -70.268},
      mapTypeId: 'terrain'
    });
    var mapDiv = map.getDiv();
    map.setOptions({
        fullscreenControl: true,
        scaleControl: true
    });

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
        drawingControlOptions: {
            drawingModes: [
                google.maps.drawing.OverlayType.RECTANGLE,
                google.maps.drawing.OverlayType.POLYGON
            ]
        },
        polygonOptions: {
            fillColor: 'green',
            fillOpacity: 0.4,
            strokeWeight: 1,
            clickable: true,
            zIndex: 1,
            editable: false
        }
    });

它上传地图,都可以。但是我看不到地图上的绘图面板。在开发控制台中,我没有错误。我的问题在哪里?

我想您忘记了在地图上添加绘图管理器,请尝试在代码末尾添加此图:

drawingManager.setMap(map);

最新更新