Google Map 形状显示

 

添加多段线

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

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

• strokeColor 指定 "#FFFFFF" 格式的十六进制 HTML 颜色。Polyline 类不支持命名颜色。
• strokeOpacity 指定一个介于 0.0 和 1.0 的数值，用于确定线颜色的不透明度。默认值为1.0。
• strokeWeight 指定线的宽度（单位：像素）。

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

所有的绘图都有 editable 属性和draggable 属性

移除多段线

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

 

flightPath.setMap(null);

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

检查多段线

多段线以 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
  });
}

查看示例 (polyline-complex.html)。

定制多段线

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

 

其他绘图都可以根据多线段的使用及方法来使用

 

-----------------------------------------------------华丽分割线（ 以下为实例代码）--------------------------------------------------------------

// 划折线
var flightPlanCoordinates = [
{lat: 36.075620815001415, lng: 120.43020844459534},
{lat: 36.074025246504746, lng: 120.4285454750061},
{lat: 36.069949462636, lng: 120.43118476867676},
{lat: 36.06604691846644, lng: 120.42285919189453},
{lat: 36.074025246504746, lng: 120.4139757156372},
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);

var workStart = new google.maps.Marker({
position: flightPlanCoordinates[0],
label: "起",
title: "上班起点",
map: map
});
var workEnd = new google.maps.Marker({
position: flightPlanCoordinates[(flightPlanCoordinates.length-1)],
label: "终", // label 只显示第一个字符
title: "上班终点",
map: map
});

// 绘制多边形
var triangleCoords = [
{lat: 36.06602136399105, lng: 120.35249282982409},
{lat: 36.082132409147086, lng: 120.42076576221541},
{lat: 36.10016285436, lng: 120.3873546955059},
{lat: 36.06602136399105, lng: 120.35249282982409},
];

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#32CD32',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#3CB371',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

// 绘制矩形
var rectangle = new google.maps.Rectangle({
draggable: true, // 是否可拖动
editable: true, // 是否可编辑
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: 36.114595,
south: 36.104595,
east: 120.369731,
west: 120.349731
}
});
// 绘制圆形
var cityCircle = new google.maps.Circle({
draggable: true, // 是否可拖动
editable: false, // 是否可编辑
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: qingdao,
radius: 600 // 单位米
});

转载于:https://www.cnblogs.com/huaxingtianxia/p/5486594.html