谷歌地图API v3绘图管理器-地图不渲染

Google Maps API v3 drawing manager - map not rendering

本文关键字：地图 管理器 API v3 绘图 谷歌地图      更新时间：2024-03-27

简单的问题是，我复制并粘贴了带有绘图管理器的谷歌地图页面的示例代码。由于某些原因，绘图控件没有加载到屏幕的顶部中心。出于安全考虑，我取出了API密钥。怎么了？代码如下。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style type="text/css"> 
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style> 
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script>
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);
    var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.MARKER,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
          google.maps.drawing.OverlayType.MARKER,
          google.maps.drawing.OverlayType.CIRCLE
        ]
      },
      markerOptions: {
        icon: 'images/beachflag.png'
      },
      circleOptions: {
        fillColor: '#ffff00',
        fillOpacity: 1,
        strokeWeight: 5,
        clickable: false,
        editable: true,
        zIndex: 1
      }
    });
    drawingManager.setMap(map);
  }
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

<script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false&libraries=drawing"></script>

您必须指定库=绘图。页面没有加载，因为您有以下错误

Cannot read property 'DrawingManager' of undefined
相关文章：