最新谷歌地图map api shape circle画圆，原文加翻译（2015.9内部实例需FQ）
个人空间ww.cumt.top
找了一上午谷歌地图的api，都是2010年左右的api，都不包含画圈的api。不得已FQ去看了谷歌的开发者中心。现在是2015年9月,翻译最新的谷歌地图api折线，画圆部分贴在下面，
Introduction
You can add various shapes to your map. A shape is an object on the map, tied to a latitude/longitude coordinate. The following shapes are available: lines, polygons, circles and rectangles. You can also configure your shapes so that users can edit or drag them.
你可以在地图上添加各种形状。形状是地图上的一个object，系在一个纬度/经度坐标系下。下面的图形可用：线条、多边形、圆形和长方形。您还可以配置您的图形，以便用户可以编辑或拖动它们。
Polylines
To draw a line on your map, use a polyline. The Polyline class defines a linear overlay of connected line segments on the map. A Polyline object consists of an array of LatLng locations, and creates a series of line segments that connect those locations in an ordered sequence.
用polyline在你的地图上画一条线。Polyline类定义了连接的线段图上的线性叠加。Polyline对象组成的数组参数的位置，并创建一个线段连接位置的有序的序列。
Add a polyline
添加折线
The Polyline constructor takes a set of PolylineOptions specifying the LatLng coordinates of the line and a set of styles to adjust the polyline’s visual behavior.
折线构造函数接受一组折线选项指定的LAT LNG坐标和一组样式去调整折线的视觉行为。
Polyline objects are drawn as a series of straight segments on the map. You can specify custom colors, weights, and opacities for the stroke of the line within the PolylineOptions when constructing your line, or you can change those properties after construction. A polyline supports the following stroke styles:
Polyline对象绘制的地图上的一系列直线段。您可以指定自定义颜色，重量，并在折线的选择时，构建线为线路的行程透明度，或者你可以构造之后改变这些属性。折线支持以下笔画样式：
strokeColorspecifies a hexadecimal HTML color of the format"#FFFFFF". ThePolylineclass does not support named colors.- strokecolor指定16进制的HTML颜色格式”# ffffff ”。折线类不支持命名的颜色。
strokeOpacityspecifies a numerical value between0.0and1.0to determine the opacity of the line’s color. The default is1.0.- strokeopacity指定确定的线的颜色的不透明度0和1之间的数值。默认值是1。
strokeWeightspecifies the width of the line in pixels.- strokeweight指定行的像素宽。
The polyline’s editable property specifies whether users can edit the shape. See user-editable shapesbelow. Similarly, you can set the draggable property to allow users to drag the line.
折线的可编辑属性指定用户是否可以编辑形状。用户可编辑的形状如下。同样，你可以设置拖动属性允许用户拖动线。
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.
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);
}
View example (polyline-simple.html).
Remove a polyline
To remove a polyline from the map, call the setMap() method passing null as the argument. In the following example, flightPath is a polyline object:
flightPath.setMap(null);
Note that the above method does not delete the polyline. It simply removes the polyline from the map. If instead you wish to delete the polyline, you should remove it from the map, and then set the polyline itself to null.
View example (polyline-remove.html).
Inspect a polyline
A polyline specifies a series of coordinates as an array of LatLng objects. These coordinates determine the line’s path. To retrieve the coordinates, call getPath(), which will return an array of type MVCArray. You can manipulate and inspect the array using the following operations:
折线指定一系列坐标作为参数的对象数组。这些坐标确定线的路径。获取坐标，使用getpath()，返回mvcarray型数组。你可以使用下列操作来操作和检查数组：
getAt()returns theLatLngat a given zero-based index value.- getat()返回参数在零基础指标值给定。
insertAt()inserts a passedLatLngat a given zero-based index value. Note that any existing coordinates at that index value are moved forward.- insertat()插入LatLng在零基础参数指标值给定。请注意，在该索引值的任何现有坐标移动。
removeAt()removes aLatLngat a given zero-based index value.- removeat()移除参数为零的索引值给定。
mvcArray[i]. You must usemvcArray.getAt(i).注意：你不能简单的检索数组的使用语法mvcarray [i]的第i个元素。你必须usemvcarray.get（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
});
}
View example (polyline-complex.html).
Customize a polyline
You can add vector-based images to a polyline in the form of symbols. With a combination of symbols and thePolylineOptions class, you have a lot of control over the look and feel of polylines on your map. See Symbols for information about arrows, dashed lines, custom symbols and animated symbols.
Polygons
A polygon represents an area enclosed by a closed path (or loop), which is defined by a series of coordinates. Polygonobjects are similar to Polyline objects in that they consist of a series of coordinates in an ordered sequence. Polygons are drawn with a stroke and a fill. You can define custom colors, weights, and opacities for the edge of the polygon (the stroke) and custom colors and opacities for the enclosed area (the fill). Colors should be indicated in hexadecimal HTML format. Color names are not supported.
Polygon objects can describe complex shapes, including:
- Multiple non-contiguous areas defined by a single polygon.
- Areas with holes in them.
- Intersections of one or more areas.
To define a complex shape, you will use a polygon with multiple paths.
Add a polygon
Because a polygonal area may include several separate paths, the Polygon object’s paths property specifies an array of arrays, each of type MVCArray. Each array defines a separate sequence of orderedLatLng coordinates.
For simple polygons consisting of only one path, you can construct a Polygon using a single array ofLatLngcoordinates. The Google Maps JavaScript API will convert the simple array into an array of arrays upon construction when storing it within the paths property. The API provides a simple getPath() method for polygons consisting of one path.
MVCArray.
The polygon’s editable property specifies whether users can edit the shape. See user-editable shapesbelow. Similarly, you can set the draggable property to allow users to drag the shape.
// 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);
}
View example (polygon-simple.html).
Polygon auto-completion
The Polygon in the example above consists of four sets of LatLng coordinates, but notice that the first and last sets define the same location, which completes the loop. In practice, however, since polygons define closed areas, you don’t need to specify the last set of coordinates. The Google Maps JavaScript API will automatically complete the polygon by drawing a stroke connecting the last location back to the first location for any given path.
The following example is identical to the previous one, except that the last LatLng is omitted: View example (polygon-autoclose.html).
Remove a polygon
To remove a polygon from the map, call the setMap() method passing null as the argument. In the following example, bermudaTriangle is a polygon object:
bermudaTriangle.setMap(null);
Note that the above method does not delete the polygon. It simply removes the polygon from the map. If instead you wish to delete the polygon, you should remove it from the map, and then set the polygon itself to null.
Inspect a polygon
A polygon specifies its series of coordinates as an array of arrays, where each array is of type MVCArray. Each “leaf” array is an array of LatLng coordinates specifying a single path. To retrieve these coordinates, call the Polygonobject’s getPaths() method. Since the array is an MVCArray you will need to manipulate and inspect it using the following operations:
getAt()returns theLatLngat a given zero-based index value.insertAt()inserts a passedLatLngat a given zero-based index value. Note that any existing coordinates at that index value are moved forward.removeAt()removes aLatLngat a given zero-based index value.
mvcArray[i]. You must usemvcArray.getAt(i).
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
var map;
var infoWindow;
function initMap() {
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.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
// Construct the polygon.
var 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.
bermudaTriangle.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;
}
/** @this {google.maps.Polygon} */
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
var vertices = this.getPath();
var contentString = '<b>Bermuda Triangle polygon</b><br>' +
'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 ' +