近来加班真是累成狗啊，每天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. 侦听编辑事宜

编辑外形时，会在编辑完成时触发事宜。下面列出了这些事宜。

一些相干的代码段：

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. 侦听拖动事宜

拖动外形时，会在拖动支配最先和结束时以及拖动时期触发事宜。关于多段线、多边形、圆和矩形，将会触发以下事宜。

如需相识更多关于处置惩罚事宜的内容，请参阅[有关事宜的文档][2]。


 


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