GoogleMap V3 叠加层折线

最新推荐文章于 2019-10-23 15:53:03 发布

原创最新推荐文章于 2019-10-23 15:53:03 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

maps 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用Google Maps API在地图上绘制折线，并通过示例代码展示了如何设置折线的颜色、透明度、粗细度及用户交互等功能。

折线

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>