Question

＆＃13;

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="TestMap.aspx.cs" Inherits="TestMap" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing" type="text/javascript"></script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8sE5-1UPLAT2UqkNqRiMnvVNh9UNZk-0&callback=initMap">
    </script>


<script type="text/javascript">


    function initMap() {
        var centerPoint = new google.maps.LatLng(41, -103);
        var mapOptions = {
            center: centerPoint,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            keyboardShortcuts: true,
            mapTypeControl: true,
            streetViewControl: true,
            drawingControl: true,
            zoom: 8
        };

      //  alert('initMap');
        var map = new google.maps.Map(document.getElementById('map'), 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,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {icon: 'images/pUmjb.jpg'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });

  drawingManager.setMap(map);
}

 
</script>

    MAP:
    <div style="width:800px; height:500px" id="map"></div>


</asp:Content>

＆＃13;

我正在尝试使用谷歌地图api的v3，它到目前为止一切正常，除了我似乎无法让绘图工具的工具栏显示在地图上。这是一个非常简化的WebForm的代码。我猜测我在某个地方错过了一个参数或一行代码，但我似乎无法让它发挥作用。

Answer 1

仅包含API一次。如果您想/需要使用密钥（建议但不要求），请将其包含在单个包含的参数中。

（现在需要更新：键）

sensor

代码段

<script src="http://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyB8sE5-1UPLAT2UqkNqRiMnvVNh9UNZk-0&callback=initMap" type="text/javascript" async defer></script>

function initMap() {
  var centerPoint = new google.maps.LatLng(41, -103);
  var mapOptions = {
    center: centerPoint,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    keyboardShortcuts: true,
    mapTypeControl: true,
    streetViewControl: true,
    drawingControl: true,
    zoom: 8
  };

  //  alert('initMap');
  var map = new google.maps.Map(document.getElementById('map'), 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,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'images/pUmjb.jpg'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });

  drawingManager.setMap(map);
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

绘图工具不会在我的地图上显示

1 个答案: