添加多段线
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" ...
随机推荐
-
nearly,about,almost的区别
nearly 几乎,将近almost 几乎,差一点儿就,差不多(与动词,副词,形容词以及名词连用时,可与nearly通用;与no,none,nothing,never等否定式连用时,不可与nearly ...
-
为网站添加一个图标icon
<link rel="icon" href="/favicon.ico" type="image/x-icon"/> <l ...
-
NETSH WINSOCK RESET这条命令的含义和作用?
简单来说netsh winsock reset命令含义是重置 Winsock 文件夹.假设一台机器上的Winsock协议配置有问题的话将会导致网络连接等问题,就须要用netsh winsock res ...
-
linux下安装swftools工具
swfTools是一种实用工具与Adobe Flash文件(swf文件)工作的集合.可以把(pdf/gif/png/jpeg/jpg/font/wav) 7种格式转换为swf文件.一般常用于文件在线浏 ...
-
微信小程序开发环境搭建
关注,QQ群,微信应用号社区 511389428 微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个 ...
-
Pandas之Series+DataFrame
Series是带有标签的一维数组,可以保存任何数据类型(整数,字符串,浮点数,python对象) index查看series索引,values查看series值 series相比于ndarray,是一 ...
-
百度Cafe原理--Android自动化测试学习历程
主要讲解内容及笔记: 一.Cafe原理 Cafe是一款自动化测试框架,解决问题:跨进程测试.快速深度测试 官网:http://baiduqa.github.io/Cafe/ Cafe provides ...
-
java笔记之面向对象
一.面向过程与面向对象的区别 1 面向过程:主要关注点是:实现的具体过程,因果关系[集成显卡的开发思路] * 优点:对于业务逻辑比较简单的程序,可以达到快速开发,前期投入成本较低. * 缺点:采用面向 ...
-
【bzoj4319】cerc2008 Suffix reconstruction 贪心
题目描述 话说练习后缀数组时,小C 刷遍 poj 后缀数组题, 各类字符串题闻之丧胆.就在准备对敌方武将发出连环杀时,对方一记无中生有,又一招顺手牵羊,小C 程序中的原字符数组就被牵走了.幸运的是,小 ...
-
CPU卡的读写【转】
本文转载自:http://blog.csdn.net/logaa/article/details/7465226 一般来说,对存储卡和逻辑加密卡操作,使用接触式IC卡通用读写器:对CPU卡使用CPU卡 ...