最新谷歌地图map api shape circle画圆,原文加翻译(2015.9内部实例需翻墙)

页面导航:首页 > 网络编程 > JavaScript > 最新谷歌地图map api shape circle画圆,原文加翻译(2015.9内部实例需翻墙)

最新谷歌地图map api shape circle画圆,原文加翻译(2015.9内部实例需翻墙)

来源:互联网 作者:脚本宝典 时间:2015-09-16 13:11 【

找了一上午谷歌地图的api,都是2010年左右的api,都不包含画圈的api。不得已FQ去看了谷歌的开发者中心。现在是2015年9月,翻译最新的谷歌地图api折线,画圆部分贴在下面, Shapes Introdu

找了一上午谷歌地图的api,都是2010年左右的api,都不包含画圈的api。不得已FQ去看了谷歌的开发者中心。现在是2015年9月,翻译最新的谷歌地图api折线,画圆部分贴在下面,

Shapes

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对象绘制的地图上的一系列直线段。您可以指定自定义颜色,重量,并在折线的选择时,构建线为线路的行程透明度,或者你可以构造之后改变这些属性。折线支持以下笔画样式:

  • strokeColor specifies a hexadecimal HTML color of the format "#FFFFFF". The Polyline class does not support named colors.

  • strokecolor指定16进制的HTML颜色格式”# ffffff ”。折线类不支持命名的颜色。

  • strokeOpacity specifies a numerical value between 0.0 and 1.0 to determine the opacity of the line’s color. The default is 1.0.

  • strokeopacity指定确定的线的颜色的不透明度0和1之间的数值。默认值是1。

  • strokeWeight specifies 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 the LatLng at a given zero-based index value.

  • getat()返回参数在零基础指标值给定。

  • insertAt() inserts a passed LatLng at a given zero-based index value. Note that any existing coordinates at that index value are moved forward.

  • insertat()插入LatLng在零基础参数指标值给定。请注意,在该索引值的任何现有坐标移动。

  • removeAt() removes a LatLng at a given zero-based index value.

  • removeat()移除参数为零的索引值给定。

Note: You cannot simply retrieve the ith element of an array by using the syntax 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.

Note: If you construct a simple polygon in this manner, you will still need to retrieve values from the polygon by manipulating the path as an 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.

Removing a polygon is similar to removing a polyline. To see the code in action for a polyline: view example (polyline-remove.html).

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 the LatLng at a given zero-based index value.

  • insertAt() inserts a passed LatLng at a given zero-based index value. Note that any existing coordinates at that index value are moved forward.

  • removeAt() removes a LatLng at a given zero-based index value.

Note: You cannot simply retrieve the ith element of an array by using the syntax 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 ' + i + ':<br>' + xy.lat() + ',' +        xy.lng();  }  // Replace the info window's content and position.  infoWindow.setContent(contentString);  infoWindow.setPosition(event.latLng);  infoWindow.open(map);}

View example (polygon-arrays.html).

Rectangles

In addition to a generic Polygon class, the Google Maps JavaScript API includes a specific class forRectangleobjects, to simplify their construction.

Add a rectangle

Rectangle is similar to a Polygon in that you can define custom colors, weights, and opacities for the edge of the rectangle (the stroke) and custom colors and opacities for the area within the rectangle (the fill). Colors should be indicated in hexadecimal numeric HTML style.

Unlike a Polygon, you do not define paths for a Rectangle. Instead, a rectangle has a bounds property which defines its shape by specifying a google.maps.LatLngBounds for the rectangle.

The rectangle’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 rectangle.

 

// 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: new google.maps.LatLngBounds(        new google.maps.LatLng(33.671, -116.251),        new google.maps.LatLng(33.685, -116.234))  });}

View example (rectangle-simple.html).

The following code creates a rectangle each time the user changes the zoom on the map. The size of the rectangle is determined by the viewport.

 

// This example creates a rectangle based on the viewport// on any 'zoom-changed' event.function initMap() {  var map = new google.maps.Map(document.getElementById('map'), {    zoom: 11,    center: {lat: 40.748520, lng: -73.981687},    mapTypeId: google.maps.MapTypeId.TERRAIN
  });  var rectangle = new google.maps.Rectangle();  map.addListener('zoom_changed', function() {    // Get the current bounds, which reflect the bounds before the zoom.    rectangle.setOptions({      strokeColor: '#FF0000',      strokeOpacity: 0.8,      strokeWeight: 2,      fillColor: '#FF0000',      fillOpacity: 0.35,      map: map,      bounds: map.getBounds()    });  });}

View example (rectangle-zoom.html).

Remove a rectangle

To remove a rectangle from the map, call the setMap() method passing null as the argument.

 

rectangle.setMap(null);

Note that the above method does not delete the rectangle. It simply removes the rectangle from the map. If instead you wish to delete the rectangle, you should remove it from the map, and then set the rectangle itself to null.

Removing a rectangle is similar to removing a polyline. To see the code in action for a polyline: view example (polyline-remove.html).

Circles

In addition to the generic Polygon class, the Google Maps JavaScript API includes a specific class forCircleobjects, to simplify their construction.

除了一般的多边形类,谷歌地图的JavaScript API包括circleobjects特定类,简化编程

Add a circle

Circle is similar to a Polygon in that you can define custom colors, weights, and opacities for the edge of the circle (the stroke) and custom colors and opacities for the area within the circle (the fill).

Circle是类似于一个 Polygon,你可以为圆的边缘定义自定义颜色,重量,和不透明度,和自定义颜色和不透明度为圆内(填充)。

Colors should be indicated in hexadecimal numeric HTML style.

颜色应该以HTML样式表示十六进制数字。

Unlike a Polygon, you do not define paths for a Circle. Instead, a circle has two additional properties which define its shape:

与多边形不同,你不需要定义一个圆的路径。相反,一个圆圈有2个额外的属性,来定义它的形状:

  • center specifies the google.maps.LatLng of the center of the circle.

  • center指定圆的中心 google.maps.latlng。

  • radius specifies the radius of the circle, in meters.

  • radius指定圆的半径,单位米。

The circle’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 circle.

圆的editable属性指用户是否可以编辑形状。看到用户可编辑的形状如下。同样,你可以设置拖动属性允许用户拖动圈。

 

// 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    });  }}

View example (circle-simple.html).

Remove a circle

To remove a circle from the map, call the setMap() method passing null as the argument.

 

circle.setMap(null);

Note that the above method does not delete the circle. It simply removes the circle from the map. If instead you wish to delete the circle, you should remove it from the map, and then set the circle itself tonull.

Removing a circle is similar to removing a polyline. To see the code in action for a polyline: view example (polyline-remove.html).

User-editable and draggable shapes

Making a shape editable adds handles to the shape, which people can use to reposition, reshape, and resize the shape directly on the map. You can also make a shape draggable, so people can move it to a different place on the map.

User-made changes to the object do not persist between sessions. If you want to save the user’s edits, you must capture and store the information yourself.

Make a shape editable

Any shape (polylines, polygons, circles, and rectangles) can be set as user-editable, by setting editableto true in the shape’s options.

 

  var bounds = new google.maps.LatLngBounds(      new google.maps.LatLng(44.490, -78.649),      new google.maps.LatLng(44.599, -78.443)  );  // Define a rectangle and set its editable property to true.  var rectangle = new google.maps.Rectangle({    bounds: bounds,    editable: true  });


View example (user-editable-shapes.html).

Make a shape draggable

By default, a shape drawn on the map will be fixed in position. To allow users to drag a shape to a different location on the map, set draggable to true in the shape options.

 

  var redCoords = [    {lat: 25.774, lng: -80.190},    {lat: 18.466, lng: -66.118},    {lat: 32.321, lng: -64.757}  ];  // Construct a draggable red triangle with geodesic set to true.  new google.maps.Polygon({    map: map,    paths: redCoords,    strokeColor: '#FF0000',    strokeOpacity: 0.8,    strokeWeight: 2,    fillColor: '#FF0000',    fillOpacity: 0.35,    draggable: true,    geodesic: true  });

When enabling dragging on a polygon or polyline, you should also consider making the polygon or polyline geodesic, by setting its geodesic property to true.

A geodesic polygon will retain its true geographic shape when it is moved, causing the polygon to appear distorted as it is moved north or south in the Mercator projection. Non-geodesic polygons will always retain their initial appearance on the screen.

In a geodesic polyline, the segments of the polyline are drawn as the shortest path between two points on the Earth’s surface, assuming the Earth is a sphere, as opposed to straight lines on the Mercator projection.

For more information on coordinate systems, consult the MapTypes documentation.

The following map shows two triangles of roughly the same size and dimensions. The red triangle has itsgeodesicproperty set to true. Notice how its shape changes as it moves north.

View example (polygon-draggable.html).

Listen to editing events

When a shape is edited, an event is fired upon completion of the edit. These events are listed below.

ShapeEvents
Circleradius_changed
center_changed
Polygoninsert_at
remove_at
set_atThe listener must be set on the polygon’s path. If the polygon has multiple paths, a listener must be set on each path.
Polylineinsert_at
remove_at
set_atThe listener must be set on the polyline’s path.
Rectanglebounds_changed

Some useful code snippets:

 

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.');});

See an example of handling an editing event on a rectangle: View example (rectangle-event.html).

Listen to dragging events

When a shape is dragged, events are fired upon start and end of the dragging action as well as during the dragging. The following events are fired for polylines, polygons, circles and rectangles.

EventDescription
dragstartFired when the user starts dragging the shape.
dragFired repeatedly while the user is dragging the shape.
dragendFired when the user stops dragging the shape.

For more about handling events, see the documentation on events.

 


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<