GoogleMap V3 叠加层复杂图形用法

最新推荐文章于 2021-01-14 15:03:54 发布

原创最新推荐文章于 2021-01-14 15:03:54 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

maps 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何利用Google Maps API V3创建多边形、圆形、矩形等图形，实现用户交互式绘图功能，并展示了如何自定义叠加层以增强地图应用的灵活性。

FROM:https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-CN#BasicShapes

多边形
   与 Polyline 对象类似，Polygon 对象也是由一系列有序坐标组成的。不过，多边形不像折线一样有两个端点，而是定义闭合区域。与折线类似的是，您可以定义影响多边形轮廓的笔触；不同的是，您还可以定义多边形内的填充区域。
   此外，Polygon 还可以展示复杂形状，其中包括不连续形状（多个多边形定义为一个多边形）、“圆环”（其中的多边形区域在多边形内显示为“岛状”）以及一个或多个多边形的交叉。因此，单个多边形可指定多条路径。
多边形选项
   与折线类似，您可以定义多边形边缘（“笔触”）的自定义颜色、粗细和不透明度，以及封闭区域（“填充”）的自定义颜色和不透明度。颜色应以十六进制数字 HTML 样式表示。
   由于多边形区域可能包括多条独立的路径，因此 Polygon 对象的 paths 属性可用于指定“一组数组”（其中每个数组都为 MVCArray 类型且分别定义一系列有序的 LatLng 坐标）。
   不过，对于仅包含一条路径的简单多边形，为方便起见，您可以使用一组 LatLng 坐标来构造 Polygon。在构造完成并将此简单数组存储到 Polygon 的 paths 属性中后，Google Maps API 会将其转换为“一组数组”。此外，该 API 还提供了简单的 getPath() 方法以构造仅包含一条路径的简单多边形。
   注意：如果您是用此方式构造多边形的，那么仍需要将路径处理为 MVCArray，以便检索多边形的相关值。
   此外，多边形的 editable 属性用于定义此形状是否在地图上为用户可修改的。

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script> 
var map;
var infoWindow;

function initialize() {
  var myLatLng = new google.maps.LatLng(30.51667,114.31667); 
  var mapOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var triangleCoords = [
      new google.maps.LatLng(25.774252, -80.190262),
      new google.maps.LatLng(18.466465, -66.118292),
      new google.maps.LatLng(32.321384, -64.75737)
  ];

  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event
  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

  infoWindow = new google.maps.InfoWindow();
}

/** @this {google.maps.Polygon} */
function showArrays(event) {

  // Since this Polygon only has one path, we can call getPath()
  // to return the MVCArray of LatLngs
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle Polygon</b><br>';
  contentString += 'Clicked Location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() + '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate: ' + i + '<br>' + xy.lat() +',' + xy.lng();
  }

  // Replace our Info Window's content and position
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

圆形和矩形
   除了普通的 Polygon 类之外，JavaScript Maps API 还包含一些适用于 Circle 和 Rectangle 的特定类（用于简化其构造）。
圆形
   Circle 与 Polygon 类似，您可以自定义圆形边缘（“笔触”）的颜色、粗细和透明度，以及封闭区域（“填充”）的颜色和透明度。颜色应以十六进制数字 HTML 样式表示。
   与 Polygon 不同，您不应为 Circle 定义 paths；圆形有两个用于定义其形状的其他属性：
       center，用于指定圆心的 google.maps.LatLng。
       radius，用于指定圆形的半径（以米为单位）。
   此外，圆形的 editable 属性用于定义此形状是否在地图上为用户可修改的。

圆形

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script> 
var lanLng = new google.maps.LatLng(30.51667,114.31667);  

// Create an object containing LatLng, population.
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 2842518
};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  population: 8143197
};
citymap['losangeles'] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  population: 3844829
}
var cityCircle;

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: lanLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  for (var city in citymap) {
    // Construct the circle for each value in citymap. We scale population by 20.
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].population / 20
    };
    cityCircle = new google.maps.Circle(populationOptions);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
	<div id="map-canvas"></div>
</body>

矩形
   Rectangle 与 Polygon 类似，您可以自定义矩形边缘（“笔触”）的颜色、粗细和透明度，以及封闭区域（“填充”）的颜色和透明度。颜色应以十六进制数字 HTML 样式表示。
   与 Polygon 不同，您不应为 Rectangle 定义 paths；矩形还有一个用于定义其形状的 bounds 属性：
       bounds，用于指定矩形的 google.maps.LatLngBounds。
   此外，矩形的 editable 属性用于定义此形状是否在地图上为用户可修改的。
   以下示例针对任何 'zoom_changed' 事件分别根据前一个视口创建了矩形：

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>  
function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 11,
    center: new google.maps.LatLng(33.678176, -116.242568),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
		  new google.maps.LatLng(33.671068, -116.25128),
		  new google.maps.LatLng(33.685282, -116.233942)
	  )
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
	<div id="map-canvas"></div>
</body>

事件
   圆形    radius_changed        center_changed
   多边形    insert_at            remove_at        set_at    监听器必须设置在多边形的路径上。如果多边形有多条路径，那么每条路径上都应设置监听器。
   折线    insert_at       remove_at        set_at        监听器必须设置在折线的路径上。
   矩形    bounds_changed
google.maps.event.addListener(circle, 'radius_changed', function() {
radius = circle.getRadius();
});

google.maps.event.addListener(outerPath, 'set_at', function() {
print('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
print('Vertex removed from inner path.');
});

绘图库
默认情况下，系统在加载 Maps JavaScript API 时不会加载该库. 必须使用 libraries 引导程序参数进行明确指定。http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing
DrawingManager 类提供了一个图形界面，以供用户在地图上绘制多边形、矩形、折线、圆形和标记。DrawingManager 对象以如下方式创建：
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
DrawingManager 选项
   DrawingManager 构造函数采用一组选项，以定义要显示的控件集、控件的位置以及初始绘图状态。
    DrawingManager 的 drawingMode 属性用于定义 DrawingManager 的初始绘图状态。该属性接受 google.maps.drawing.OverlayType 常量，且默认为 null（在此情况下启动 DrawingManager 时，光标会处于非绘图模式）。
    DrawingManager 的 drawingControl 属性用于定义地图上的绘图工具选择界面的可见性。该属性接受布尔值。
    您还可以使用 DrawingManager 的 drawingControlOptions 属性，定义控件的位置以及控件中应表示的叠加层的类型。
        position 用于定义绘图控件在地图上的位置，且接受 google.maps.ControlPosition 常量。
        drawingModes 是一组 google.maps.drawing.OverlayType 常量，且用于定义绘图控件形状选择器中包含的叠加层类型。系统将始终显示手形图标，以便用户无需绘图即可与地图进行交互。
    您可为每种叠加层类型都指定一组默认属性，以便定义首次创建相应叠加层时所采用的外观。这些属性可在叠加层的 {overlay}Options 属性（其中 {overlay} 表示叠加层的类型）中进行定义。例如，圆形的填充属性、笔触属性、zIndex 和可点击性可使用 circleOptions 属性进行定义。如果已传递任何大小、位置或地图值，则系统会忽略这些默认属性。

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
<script>
var lanLng = new google.maps.LatLng(30.51667,114.31667); 
function initialize() {
  var mapOptions = {
    center: lanLng,
    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,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'http://www.googlemapsmarkers.com/v1/A/0099FF/'
    },
    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>

以下略

更新绘图工具控件
创建 DrawingManager 对象后，可调用 setOptions() 并传递新的值，以进行更新。
drawingManager.setOptions({
drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: [google.maps.drawing.OverlayType.MARKER]
}
});
使用以下方法即可隐藏或显示绘图工具控件：
// To hide:
drawingManager.setOptions({
drawingControl: false
});
// To show:
drawingManager.setOptions({
drawingControl: true
});
要从 map 对象删除绘图工具控件，使用以下方法：
drawingManager.setMap(null);

创建形状叠加层后，会触发以下两个事件：
   {overlay}complete 事件（其中 {overlay} 代表叠加层类型，例如 circlecomplete、polygoncomplete 等）。对相应叠加层的引用会作为参数进行传递。
   overlaycomplete 事件。包含 OverlayType 和对相应叠加层的引用的对象常量会作为参数进行传递。

google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
var radius = circle.getRadius();
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
    var radius = event.overlay.getRadius();
}
});

信息窗口
InfoWindow 用于在地图上方以浮动窗口的形式显示内容。信息窗口有点像漫画书上的文字气泡框，它有一个内容区域和一条锥形引线，引线的头位于地图的指定位置上。点击 Google 地图上的商户标记后，就可以看到活动的信息窗口了。
InfoWindow 构造函数采用 InfoWindow options 对象，以指定一组关于信息窗口的显示方式的初始参数。创建完毕后，所生成的信息窗口不会添加到地图上。要显示该信息窗口，需要对 InfoWindow 调用 open() 方法，并向其传递要在其上打开信息窗口的 Map，以及用于锚定该信息窗口的 Marker（可选）。（如果未提供任何标记，则会在该信息窗口的 position 属性处将其打开。）
InfoWindow options 对象是一个包含以下字段的对象常量：
    content，其中包含要在信息窗口打开后显示在其中的文本字符串或 DOM 节点。
    pixelOffset，其中包含从信息窗口的尖端到其锚定位置的偏移量。实际上，您无需修改此字段。
    position，其中包含此信息窗口锚定位置处的 LatLng。请注意，在标记上打开信息窗口后，系统会自动使用一个新位置更新该值。
    maxWidth，用于指定信息窗口的最大宽度（以像素为单位）。默认情况下，信息窗口会根据其内容进行扩展，并且如果是为填充地图而进行扩展的，则其文本会自动换行。如果您实现了 maxWidth，那么信息窗口将会自动换行以强制适应像素宽度。如果屏幕的实际使用面积允许的话，那么信息窗口在达到最大宽度后仍然可以垂直扩展。
InfoWindow 的内容可以是文本字符串、HTML 代码段，也可以就是 DOM 元素。要设置此内容，请在 InfoWindow options 构造函数中传递该内容，或者对信息窗口显式调用 setContent()。要显式调整内容的大小，您可以使用 <div> 进行调整，或者启用滚动功能（如果您希望的话）。请注意，如果您没有启用滚动功能，且内容的大小又超出了信息窗口的可用空间，那么内容可能会从信息窗口中“溢”出。
可以将 InfoWindow 附加到 Marker 对象（在此情况下，信息窗口的位置取决于标记的位置）上，或者地图上所指定的 LatLng 位置。如果您一次只想显示一个信息窗口（正如 Google 地图上的相应行为），只需创建一个信息窗口，然后在地图事件（例如用户点击）完毕后将其重新分配到不同的位置或标记即可。不过与 Google Maps API V2 中的相应行为不同，如果您选择执行以上操作，那么地图可能会立即显示多个 InfoWindow 对象。
要更改某个信息窗口的位置，您可以对该信息窗口调用 setPosition() 以显式更改其位置，或者使用 InfoWindow.open() 方法将其附加到新标记。请注意，如果您在没有传递标记的情况下调用了 open()，那么 InfoWindow 将会使用构建完毕后通过 InfoWindow options 对象所指定的位置。
var infowindow = new google.maps.InfoWindow({
    content: contentString
});
infowindow.open(map,marker);

地面叠加层
多边形在表示不规则的区域时很有用，但不能显示图片。要在地图上放置一张图片，请使用 GroundOverlay 对象。 GroundOverlay 的构造函数指定图片的网址和 LatLngBounds 作为参数。图片将在地图上的给定边界内呈现，并与地图的投影一致。

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {

  var newark = new google.maps.LatLng(40.740, -74.18);
  var imageBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(40.712216,-74.22655),
      new google.maps.LatLng(40.773941,-74.12544));

  var mapOptions = {
    zoom: 13,
    center: newark,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var oldmap = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  oldmap.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
</body>

自定义叠加层
创建自定义叠加层的 OverlayView 类。OverlayView 是一个基类，可为您提供在创建叠加层时必须实现的若干方法。该类还提供了一些方法，用于实现屏幕坐标和地图位置之间的转换。
要创建自定义叠加层，请执行以下操作：
    将自定义对象的 prototype 设置为 google.maps.OverlayView() 的新实例。这可以有效地实现叠加层类的“子类化”。
    为自定义叠加层创建构造函数，并将该构造函数中的所有初始化参数都设置为自定义属性。
    在原型中实现 onAdd() 方法，以将叠加层附加到地图。在地图准备好附加叠加层后，系统将会调用 OverlayView.onAdd()。
    在原型中实现 draw() 方法，以处理对象的视觉显示。同样，在对象首次显示后，系统将会调用 OverlayView.draw()。
    您还应实现 onRemove() 方法，以清理叠加层中添加的所有元素。

初始化叠加层
   当叠加层完成首次示例化并处于准备显示状态时，我们需要通过浏览器的 DOM 将其附加到地图。API 会显示相关信息以表明：系统已通过调用叠加层的 onAdd() 方法将其添加到地图。在处理此方法时，我们会创建一个用于存储图片的 <div>，然后添加一个 <img> 元素并将其附加到 <div>，最后将叠加层附加到地图的一个“窗格”（即 DOM 树中的节点）。
   一组 MapPanes 类型的窗格用于指定不同的层在地图上的堆叠顺序。您可以使用以下窗格，并按以下枚举顺序（由下至上，第一个窗格在最下面）堆叠这些窗格：
    MapPanes.mapPane
    MapPanes.overlayLayer
    MapPanes.overlayShadow
    MapPanes.overlayImage
    MapPanes.floatShadow
    MapPanes.overlayMouseTarget
    MapPanes.floatPane
绘制叠加层
   实现此 draw() 方法，然后使用 getProjection() 检索叠加层的 MapCanvasProjection，并计算对象的右上角和左下角锚定点的准确坐标，从而重新调整 <div> 的大小
删除叠加层
   还会添加 onRemove() 方法，以便从地图彻底删除叠加层。如果之前将叠加层的 map 属性设为了 null，那么系统将会自动通过 API 调用此方法。
隐藏和显示叠加层
   隐藏或显示（而不只是创建或删除）叠加层，您可实现自己的 hide() 和 show() 方法，以调整叠加层的可见性。