谷歌地图 API 添加形状

最近加班真是累成狗啊,天天10点以后下班。还有其他的事情,总之都是要死要死的感觉,苦逼的程序员。
谷歌地图形状官网:https://developers.google.com…

简介

您可以向地图添加各种形状。形状是地图上与某个纬度/经度坐标绑定的对象。可用的形状如下:线多边形矩形。您还可以将形状配置为可供用户进行编辑或拖动。

多段线

如需在地图上绘制线,请使用多段线。 Polyline 类在地图上定义线性相连线段叠层。Polyline 对象包含一个 LatLng 位置数组,它创建的一系列线段以有序方式将这些位置连接起来。

1. 添加多段线

Polyline 构造函数带有一组用于指定线的 LatLng 坐标的 PolylineOptions,以及一组用于调整多段线视觉行为的样式。

Polyline 对象在地图上绘制为一系列直线线段。您可以在构建线时在PolylineOptions 内指定线描边的自定义颜色、粗细和不透明度,也可在构建后更改这些属性。多段线支持下列描边样式:

  • strokeColor 指定 "#FFFFFF" 格式的十六进制 HTML 颜色。Polyline 类不支持命名颜色。

  • strokeOpacity 指定一个介于 0.0 和 1.0 的数值,用于确定线颜色的不透明度。默认值为 1.0。

  • strokeWeight 指定线的宽度(单位:像素)。

    多段线的 editable 属性指定用户是否可以编辑形状。请参阅下文的用户可编辑形状。同理,您也可以通过设置 draggable属性来允许用户拖动线。

//此示例创建一个2-pixel-wide红色线显示的路径威廉的第一次跨越太平洋的飞行,途经奥克兰、CA、布里斯班、澳大利亚。function initMap() {  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

2. 移除多段线

如需移除地图中的多段线,请调用 setMap() 方法,并传递 null 作为其自变量。在下例中,flightPath 是一个多段线对象:

`flightPath.setMap(null);`        // This example adds a UI control allowing users to remove the polyline from the map.
    
    var flightPath;    var map;    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: {lat: 0, lng: -180},
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });    
      var flightPathCoordinates = [
        {lat: 37.772, lng: -122.214},
        {lat: 21.291, lng: -157.821},
        {lat: -18.142, lng: 178.431},
        {lat: -27.467, lng: 153.027}
      ];
    
      flightPath = new google.maps.Polyline({
        path: flightPathCoordinates,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
    
      addLine();
    }    
    function addLine() {
      flightPath.setMap(map);
    }    
    function removeLine() {
      flightPath.setMap(null);
    }

3. 检查多段线

多段线以 LatLng 对象数组形式指定一系列坐标。这些坐标决定线的路径。如需检索这些坐标,请调用 getPath(),后者将返回MVCArray 类型的数组。您可以利用下列操作操纵和检查该数组:

  • getAt() 返回给定以零为起点索引值处的 LatLng

  • insertAt() 在给定以零为起点索引值处插入传递的 LatLng。请注意,该索引值处的任何现有坐标都将前移

  • removeAt() 移除给定以零为起点索引值处的 LatLng

注:不能直接利用 mvcArray[i] 语法检索数组的第 i 个元素。您必须使用 mvcArray.getAt(i)

// This example creates an interactive map which constructs a polyline based on// user clicks. Note that the polyline only appears once its path property// contains two LatLng coordinates.var poly;var map;function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);  // Add a listener for the click event
  map.addListener('click', addLatLng);
}// Handles click events on a map, and adds a new point to the Polyline.function addLatLng(event) {  var path = poly.getPath();  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

4. 定制多段线

可以向多段线添加符号形式的基于矢量的图像。您可以通过组合使用符号和 PolylineOptions 类对地图上多段线的外观进行充分的控制。请参阅符号,了解有关箭头、虚线、自定义符号及动画符号的信息。

多边形

多边形表示由闭合路径(或环路)封闭的区域,由一系列坐标定义。Polygon 对象与 Polyline 对象类似,因为它们都包含一系列有序的坐标。多边形使用描边和填充区绘制。您可以为多边形边缘(描边)定义自定义颜色、粗细和不透明度,以及为封闭区域(填充区)定义自定义颜色和不透明度。颜色应以十六进制 HTML 格式表示。不支持颜色名称。

Polygon 对象可描述复杂形状,其中包括:

  • 由单个多边形定义的多个不连续区域

    • 带孔的区域

    • 一个或多个区域的交集

1. 添加多变形

由于多边形区域可能包括几个不同路径,因此 Polygon 对象的 paths 属性指定的是数组的数组,每个数组的类型均为 MVCArray。每个数组定义的都是不同的有序 LatLng 坐标序列。

对于只包括一个路径的简单多边形,您可以利用单个 LatLng 坐标数组构建 Polygon。构建时,Google Maps JavaScript API 将在于 paths 属性内存储该简单数组时将其转换成数组的数组。API 为包括一个路径的多边形提供了一个简单的 getPath() 方法。

注:如果您以这种方式构建一个简单的多边形,仍需通过以 MVCArray 形式操纵路径来检索多边形的值。

多边形的 editable 属性指定用户是否可以编辑形状。请参阅下文的用户可编辑形状。同理,您也可以通过设置 draggable 属性来允许用户拖动形状。

// This example creates a simple polygon representing the Bermuda Triangle.function initMap() {    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: {
            lat: 24.886,
            lng: -70.268
        },
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });    // Define the LatLng coordinates for the polygon's path.
    var triangleCoords = [{
        lat: 25.774,
        lng: -80.190
    }, {
        lat: 18.466,
        lng: -66.118
    }, {
        lat: 32.321,
        lng: -64.757
    }, {
        lat: 25.774,
        lng: -80.190
    }];    // Construct the polygon.
    var bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });
    bermudaTriangle.setMap(map);
}

上例中的 Polygon 包含四组 LatLng 坐标,但请注意第一组坐标和最后一组坐标定义的位置相同,该位置用于完成环路。但在实践中,由于多边形定义的是封闭区域,因此您无需定指定最后一组坐标。Google Maps JavaScript API 将通过绘制一笔,将任何给定路径的最后一个位置连回第一个位置,自动完成多边形。

2. 移除多边形

如需移除地图中的多边形,请调用 setMap() 方法,并传递 null 作为其自变量。在下例中,bermudaTriangle 是一个多边形对象:

bermudaTriangle.setMap(null);

3. 检查多边形

多边形以数组的数组形式指定其坐标系列,其中每个数组的类型均为 MVCArray。每个“叶”数组都是一个指定单个路径的 LatLng 坐标数组。如需检索这些坐标,请调用 Polygon 对象的 getPaths() 方法。由于该数组是 MVCArray,您需要利用下列操作操纵和检查该数组:

  • getAt() 返回给定以零为起点索引值处的 LatLng

  • insertAt() 在给定以零为起点索引值处插入传递的 LatLng。请注意,该索引值处的任何现有坐标都将前移

  • removeAt() 移除给定以零为起点索引值处的 LatLng

矩形

除了 Polygon 泛型类外,Google Maps JavaScript API 还提供了专供 Rectangle 对象简化其结构的类。

1. 添加矩形

Rectangle 与 Polygon 类似,您也可以为矩形边缘(描边)定义自定义颜色、粗细和不透明度,以及为矩形内区域(填充区)定义自定义颜色和不透明度。颜色应以十六进制数值 HTML 样式表示。

与 Polygon 不同的是,您无需为 Rectangle 定义 paths。与多边形不同,矩形具有一个 bounds 属性,通过为矩形指定 google.maps.LatLngBounds 来定义其形状。

矩形的 editable 属性指定用户是否可以编辑形状。请参阅下文的用户可编辑形状。同理,您也可以通过设置 draggable 属性来允许用户拖动矩形。

// This example adds a red rectangle to a map.function initMap() {    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {
            lat: 33.678,
            lng: -116.243
        },
        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: {
            north: 33.685,
            south: 33.671,
            east: -116.234,
            west: -116.251
        }
    });
}

2. 移除矩形

如需移除地图中的矩形,请调用 setMap() 方法,并传递 null 作为其自变量。

 rectangle.setMap(null);

请注意,以上方法不会删除矩形,而只是从地图中移除矩形。如果您实际上是想删除矩形,则应先将其从地图中移除,然后将矩形本身设置为 null。

除了 Polygon 泛型类外,Google Maps JavaScript API 还提供了专供 Circle 对象简化其结构的类。

1. 添加圆

Circle 与 Polygon 类似,您也可以为圆的边缘(描边)定义自定义颜色、粗细和不透明度,以及为圆内区域(填充区)定义自定义颜色和不透明度。颜色应以十六进制数值 HTML 样式表示。

与 Polygon 不同的是,您无需为 Circle 定义 paths。圆具有两个额外的形状定义属性:

  • center 指定圆中心的 google.maps.LatLng

  • radius 指定圆的半径(单位:米)

    圆的 editable 属性指定用户是否可以编辑形状。请参阅下文的用户可编辑形状。同理,您也可以通过设置 draggable 属性来允许用户拖动圆。

// This example creates circles on the map, representing populations in North// America.// First, create an object containing LatLng and population for each city.var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};function initMap() {  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

2. 移除园

如需移除地图中的圆,请调用 setMap() 方法,并传递 null 作为其自变量。

circle.setMap(null);

请注意,以上方法不会删除圆,而只是从地图中移除圆。如果您实际上是想删除圆,则应先将其从地图中移除,然后将圆本身设置为 null。

可由用户编辑和拖动的形状

将形状设置为可编辑会给形状添加手柄,用户可以利用手柄直接在地图上对形状进行位置调整、重新塑形和尺寸调整。您还可以将形状设置为可拖动,以便用户将其移至地图上的其他地点。

用户对对象做出的更改无法跨会话存留。如果您想保存用户的编辑,必须自行采集和存储信息。

1. 将形状设置为可编辑

可通过在形状的选项中将 editable 设置为 true,将任何形状(多段线、多边形、圆和矩形)设置为可由用户编辑。

2. 将形状设置为可拖动

默认情况下,在地图上绘制的形状位置固定。如需允许用户将形状拖动到地图上的其他位置,请在形状的选项中将 draggable 设置为true

3. 侦听编辑事件

编辑形状时,会在编辑完成时触发事件。下面列出了这些事件。

形状 事件
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() {  console.log(circle.getRadius());
});

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

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

google.maps.event.addListener(rectangle, 'bounds_changed', function() {  console.log('Bounds changed.');
});

4. 侦听拖动事件

拖动形状时,会在拖动操作开始和结束时以及拖动期间触发事件。对于多段线、多边形、圆和矩形,将会触发下列事件。

事件 说明
dragstart 当用户开始拖动形状时触发
drag 在用户拖动形状期间反复触发
dragend 当用户停止拖动形状时触发
如需了解更多关于处理事件的内容,请参阅[有关事件的文档][2]。


  [1]: https://developers.google.com/maps/documentation/javascript/symbols