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
});
}
定制多段线
您可以向多段线添加符号形式的基于矢量的图像。您可以通过组合使用符号和 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 // 单位米
});
Google Map 形状显示的更多相关文章
- 如何将经纬度利用Google Map API显示C# VS2005 Sample Code
原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上 ...
- Google Map和桌面组件 Android开发教程
本文节选于机械工业出版社推出的<Android应用开发揭秘>一 书,作者为杨丰盛.本书内容全面,详细讲解了Android框架.Android组件.用户界面开发.游戏开发.数据存储.多媒体开 ...
- Android开发之Google Map
2013-07-03 Google Map 提供三种视图: 1. 传统的矢量地图,提供行政区域.交通以及商业信息等. 2. 不同分辨率的卫星照片,与Google Earth 基本一样. 3. 地形地图 ...
- Google Map API V3开发(3)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API 应用实例说明
目录 Google Map API 1基础知识 1.1 Google 地图 API 概念 1.2 Google 地图的"Hello, World" 1.2.1 加载 Google ...
- Google Map API V3开发(1)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发(4)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发(6) 代码
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API 使用总结
Google Map API (一):显示一个最基本的地图 1 实现一个地图:<head>中引用: <script type="text/javascript" ...
随机推荐
- 我所遭遇过的中间件--3D MAX SDK
搞图形的人都知道3D MAX,而3D MAX SDK就是在该软件基础上的一套软件开发包.至于该不该将3D MAX SDK归纳为中间件,不要在意这细节了,反正我觉得SDK和中间件就差不多是一个东西.实际 ...
- fdisk 分区格式化为ext4格式分区
第一步:添加硬盘/新建分区(fdisk) 第二步:格式化分区(mkfs.ext4) 第三步:加载分区(mount) 1.第一步:添加硬盘/新建分区(fdisk) a.查看当前系统所有硬盘及分区情况:f ...
- AngularJs HTTP响应拦截器实现登陆、权限校验
$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们 ...
- php CURL 请求头和响应头获取
1.从CURL中获取响应头 $oCurl = curl_init(); // 设置请求头, 有时候需要,有时候不用,看请求网址是否有对应的要求 $header[] = "Content-ty ...
- GoLang中flag标签使用
正如其他语言一样,在 linux 系统上通过传入不同的参数来使得代码执行不同逻辑实现不同功能,这样的优点就是执行想要的既定逻辑而不需要修改代码重新编译与打包.在 Golang 语言中也为我们提供了相应 ...
- Spark Streaming事务处理彻底掌握
本篇文章主要从二个方面展开: 一.Exactly Once 二.输出不重复 事务: 银行转帐为例,A用户转账给B用户,B用户可能收到多笔钱,如何保证事务的一致性,也就是说事务输出,能够输出且只会输出一 ...
- Oracle Agile PLM Web Services 的实现
Oracle 的产品Agile PLM内置了许多Web Services,其他系统可以通过Web Servcies实现对Agile PLM系统资源的访问.快速学会使用的方法,是去Oracle的官网下载 ...
- ListView 拖拽
private void ListView1_MouseMove(object sender, MouseEventArgs e) { Patientappointment appointment = ...
- PHP OAuth 2.0 Server
PHP OAuth 2.0 Server PHP OAuth 2.0 Server ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ ...
- rapidxml修改节点的值
1.rapidxml修改节点的value,修改之后,序列化还是原来的值,具体原因是什么,要看rapidxml是怎么实现的.如下: void TestRapidXml() { ]; sprintf(xm ...