折线
https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-CN#Polylines
Polyline 类用于定义地图上已连接线段的线性叠加层。Polyline 对象包含一组 LatLng 位置,并可绘制一系列线段,以便按顺序连接这些位置。
折线选项
Polyline 构造函数采用一组 Polyline options(用于指定线的 LatLng 坐标)和一组样式(用于调整折线的视觉行为)。
Polyline 就是在地图上绘制的一系列直线线段。您可以在构造线时所使用的 Polyline options 对象中,为线的笔触指定自定义颜色、粗细度和透明度,或在构造之后更改这些属性。折线支持以下笔触样式:
strokeColor,用于指定 "#FFFFFF" 格式的十六进制 HTML 颜色。Polyline 类不支持使用已命名的颜色。
strokeOpacity,用于指定线的颜色透明度,其分数比例值在 0.0 到 1.0(默认值)之间。
strokeWeight,用于指定线的笔触粗细度(以像素为单位)。
此外,折线的 editable 属性用于定义此形状是否在地图上为用户可修改的。
示例
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> function initialize() { var lanLng = new google.maps.LatLng(30.51667,114.31667); var mapOptions = { zoom: 4, center: lanLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //创建折线 var flightPlanCoordinates = [ new google.maps.LatLng(23.117055,113.27599), //广州 lanLng, //武汉 new google.maps.LatLng(30.40, 120.51), new google.maps.LatLng(39.57, 116.17) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, editable:true,//此形状是否在地图上为用户可拖动修改的 strokeWeight: 2 // 2 像素的红色折线 }); flightPath.setMap(map); //创建了一张交互式地图,其中的折线是根据用户的点击次数构造的 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 }); } // Add a listener for the click event google.maps.event.addListener(map, 'click', addLatLng); var lineCoordinates = [ new google.maps.LatLng(31.40, 120.51), new google.maps.LatLng(38.57, 116.17) ]; /** var lineSymbol = { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW }; */ var lineSymbol = { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }; var polyOptions = { path: lineCoordinates, strokeColor: '#000000', strokeOpacity: 1.0, //strokeOpacity: 0, 透明度 icons: [{ icon: lineSymbol, //repeat: '20px', offset: '100%' }], strokeWeight: 3 } poly = new google.maps.Polyline(polyOptions); poly.setMap(map); //自定义符号可让您向折线添加多种不同的形状 var lineCoordinates2 = [ new google.maps.LatLng(31.40, 110.51), new google.maps.LatLng(38.57, 106.17) ]; var symbolOne2 = { path: 'M -2,0 0,-2 2,0 0,2 z', strokeColor: '#F00', fillColor: '#F00', fillOpacity: 1 }; var symbolTwo2 = { path: 'M -2,-2 2,2 M 2,-2 -2,2', strokeColor: '#292', strokeWeight: 4 }; var symbolThree2 = { path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3', strokeColor: '#00F', rotation: 0 }; var line2 = new google.maps.Polyline({ path: lineCoordinates2, icons: [{ icon: symbolOne2, offset: '0%' },{ icon: symbolTwo2, offset: '50%' },{ icon: symbolThree2, offset: '100%' } ], map: map }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body>
相关推荐
谷歌地图 Google Map API V3 中提供了多种叠加层和地图类型,例如卫星图、街道图、ybrid 图等。开发者可以使用 OverlayView 对象和 MapType 对象来自定义叠加层和地图类型,以便在地图上显示不同的视图。 十、图层 ...
3. **地面覆盖**:使用`google.maps.GroundOverlay`添加图像覆盖层,常用于卫星图像或地形图的叠加。 **五、图层与服务** 1. **交通图层**:通过`map.overlayMapTypes.push()`添加交通流量图层。 2. **地形图层**:...
总的来说,Google Maps API V3 提供了丰富的叠加层功能,使得开发者可以构建功能强大且互动性强的网络地图应用。通过熟练掌握叠加层的使用,你可以创建出具有个性化地图元素和丰富交互性的地图项目,为用户提供独特...
Google Map V3 开放手册 开放文档 里面包含了 Map类 方法 属性 是咧
在IT行业中,Google Map V3是Google Maps API的第三大主要版本,专为Web开发者设计,用于在网页上集成和自定义地图功能。这个“google map v3离线地图资源包”显然提供了一种方法,使得用户能够在没有互联网连接的...
**Google Map V3 API**是谷歌提供的一种用于在网页中集成地图功能的接口,它允许开发者利用JavaScript语言创建交互式的地图应用。这个API是Google Maps API的第三个主要版本,提供了更多的功能、更好的性能以及更...
由于这个压缩包名为"WebMap",里面可能包含了一个简单的web应用,展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码,了解上述知识点的实际应用,并进一步扩展自己的地图应用开发...
**WPF Google Map V3 示例详解** 在Windows Presentation Foundation(WPF)开发中,集成Google Maps API可以帮助我们创建丰富的地理信息系统应用。本示例重点介绍了如何在WPF项目中使用Google Maps API V3,实现...
综上所述,"Google Map v3 官方实例"中的内容涵盖了地图集成、交互设计、地理信息处理等多个方面,对于任何希望在网站或应用中集成地图功能的开发者而言,都是极其宝贵的参考资料。通过学习和实践这些实例,开发者...
根据经纬度转换成详细地址。由于google map v2 已申请不了key 了, 更换成v3, 代码也需要更换成v3代码。2013-10-30上传。
**GoogleMap V3 样式详解** 在Web开发中,Google Maps API V3是一个强大的工具,它允许开发者在网页上嵌入交互式的地图,并进行高度自定义。本篇将深入探讨如何利用Google Maps API V3来创建和管理地图的样式,以...
谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用,包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...
在本文中,我们将深入探讨Google Maps API的第三版(V3),主要关注V3地图搜索、地图标注以及多点标注的实现。Google Maps API V3是Google提供的一个强大的JavaScript库,用于在网页上嵌入交互式地图,进行地理位置...
### Google Maps API:绘制折线图示例解析 #### 一、引言 在Web开发领域,特别是地理信息系统(GIS)应用中,Google Maps API是一个非常强大的工具,它允许开发者在网页上集成交互式地图。其中,绘制路径或折线是...
Google Map自定义叠加层 Google Map自定义叠加层是一个用于在Google Map中构建自定义信息叠加层的库。 通过使用它,您可以轻松地在Google地图部分上设计和实现自己的自定义信息框。 文件 Google Map Custom Overlay...
public void onMapReady(GoogleMap googleMap) { // 在这里可以操作GoogleMap对象,比如设置地图类型、缩放级别等 } }); ``` 在`onMapReady`回调中,你可以获取到GoogleMap对象,然后就可以开始绘制路线了。通常...
Google Map API V3(3.9.12)是谷歌提供的一个用于在网页上嵌入交互式地图的服务,它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试,这...
GoogleMap API提供了一系列接口,如地图视图、标记(Markers)、信息窗口(InfoWindows)、折线(Polylines)和多边形(Polygons)等,用于显示地理位置、添加标注、绘制路径等。此外,API还支持地理编码(Geocoding...
谷歌地图API V3是一个强大的工具,用于在网页上集成交互式地图功能。在这个案例中,我们将探讨如何使用PHP和MySQL数据库与谷歌地图V3 API进行动态交互,实现用户点击地图后添加标记,并将这些标记信息存储到数据库中...
在IT行业中,Google Maps JavaScript API V3(简称jsv3)是开发人员广泛使用的工具,用于集成地图功能到Web应用程序中。这个API提供了丰富的功能,包括地图显示、标记定位、路径绘制、地理编码、信息窗口等。下面...