无法加载绘图库(谷歌地图)

时间:2018-02-08 10:01:43

标签: javascript jquery 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
        }
    });

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

1 个答案:

答案 0 :(得分:1)

我想您忘了将您的drawingManager添加到地图中,请尝试在代码末尾添加:

drawingManager.setMap(map);