折线
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>
相关推荐
googleMap折线示例 googleMap折线示例 googleMap折线示例
Google Map V3 开放手册 开放文档 里面包含了 Map类 方法 属性 是咧
google map v3开发 V3地图搜素,V3地图标注,V3地图多点标注
Google Map v3 官方实例 .手工整理的.
GoogleMap中文教程,包含V3版本中文API,不过是通过翻译出来的,不过作为平时上不了网的脱机资源还是可以看看的。
google map v3 demo 数据库动态案例 php的
google map v3离线地图资源包,原博文链接源码
google map v3 讲述叠加层 内附代码讲解 为了让用户能尽快使用第三版API,Google已经在实验室中将其基本的功能发布,点这里可以查看文档,当然全部功能并没有完全开发好,用户可以对其提供一些使用上的反馈,用户...
googleMap的中文API,V3版本的,希望对于还在使用googleMap离线地图的你有所帮助
Google Map API V3 离线开发文档(与Google官网一模一样,经编辑后离线也能照样查看,速度提升一个等级) PS:文件不能重命名,而原因想必你懂的!
一个集成google map api v3版本的wpf程序,点击地图自动添加标记
根据经纬度转换成详细地址。由于google map v2 已申请不了key 了, 更换成v3, 代码也需要更换成v3代码。2013-10-30上传。
谷歌MAP_V3中文详解以及一个简单例子
谷歌升级后的地图demo,不包含密钥的开发。仅供借鉴
Google Map api V3 (3.9.12)的离线开发包
Google Map自定义叠加层 Google Map自定义叠加层是一个用于在Google Map中构建自定义信息叠加层的库。 通过使用它,您可以轻松地在Google地图部分上设计和实现自己的自定义信息框。 文件 Google Map Custom Overlay...
写了很多关于googlemap js v3的示例,仅供参考
谷歌地图google map api v3 ExtDraggableObject可拖拽对象类
Google mapGoogle mapGoogle mapGoogle mapGoogle mapGoogle mapGoogle map
谷歌地图Google Map API中文开发文档 V3