动态绘制曲线示例

点击地图开始画线，点击右键结束画线。

此示例展示如何在地图区动态绘制曲线，并计算距离。可用鼠标在地图上点击确定节点，鼠标移到时动态跟随画线，类似于测距功能。

关键代码

		//定义标记样式
		var markerStyle=new sogou.maps.MarkerImage('http://api.go2map.com/maps/images/v2.0/c31.png',
			  // 蓝点图标宽16像素，高14像素
			  new sogou.maps.Size(16, 14),
			  // 原点在图片的(34,88)
			  new sogou.maps.Point(34,88),
			  // 锚点在图标中心
			  new sogou.maps.Point(8,7),
			  // 合并图片的大小
			  new sogou.maps.Size(51, 156));
		//定义带箭头的样式
		var lineStyle={id:"L02","v:stroke":{color:"#0cf",weight:"5",endcap:"Round",opacity:"75%",endArrow:"Classic",endarrowlength:"long",endarrowwidth:"wide"}};		var line = new sogou.maps.Polyline({
			map:map,
			style:lineStyle,
			zIndex:2
		});
		var path=[],marker;
		sogou.maps.event.addListener(map,"click",function(evt)
		{
			//evt.point 搜狗地图坐标
			path.push(evt.point);
			//添加节点蓝点，计算路径距离
			marker=new sogou.maps.Marker({map:map,position:evt.point,icon:markerStyle,title:calcDistance(path)+"米",label:{visible:true}});
			if(path.length>1)
			{
				line = new sogou.maps.Polyline({
					map:map,
					styles:[lineStyle],
					zIndex:2
				});
				path=[];
				path.push(evt.point);
			}
		});
		sogou.maps.event.addListener(map,"mousemove",function(evt)
		{
			//evt.point 搜狗地图坐标
			path.length>0&&line.setPath(path.concat([evt.point]));
		
		});
		//点击右键结束
		sogou.maps.event.addListener(map,"rightclick",function(evt)
		{
			//evt.point 搜狗地图坐标
			line.remove();
			path=[];
		});
		//计算距离
		var convertor=new sogou.maps.Convertor();
		function calcDistance(a)
		{
			var b=0,i;
			for(i=0;i<a.length;i++)
			{
				if(a[i+1]) b+=convertor.distance(a[i],a[i+1]);
			}
			return parseInt(b)
		}

代码解析

设置节点标记样式和带箭头的线样式。

		//定义标记样式
		var markerStyle=new sogou.maps.MarkerImage('http://api.go2map.com/maps/images/v2.0/c31.png',
			  // 蓝点图标宽16像素，高14像素
			  new sogou.maps.Size(16, 14),
			  // 原点在图片的(34,88)
			  new sogou.maps.Point(34,88),
			  // 锚点在图标中心
			  new sogou.maps.Point(8,7),
			  // 合并图片的大小
			  new sogou.maps.Size(51, 156));
		//定义带箭头的样式
		var lineStyle={id:"L02","v:stroke":{color:"#0cf",weight:"5",endcap:"Round",opacity:"75%",endArrow:"Classic",endarrowlength:"long",endarrowwidth:"wide"}};

创建线对象。

		var line = new sogou.maps.Polyline({
			map:map,
			style:lineStyle,
			zIndex:2
		});

侦听地图区左键点击。点击时绘制折线节点，计算距离。

		sogou.maps.event.addListener(map,"click",function(evt)
		{
			//evt.point 搜狗地图坐标
			path.push(evt.point);
			//添加节点蓝点，计算路径距离
			marker=new sogou.maps.Marker({map:map,position:evt.point,icon:markerStyle,title:calcDistance(path)+"米",label:{visible:true}});
			if(path.length>1)
			{
				line = new sogou.maps.Polyline({
					map:map,
					styles:[lineStyle],
					zIndex:2
				});
				path=[];
				path.push(evt.point);
			}
		
		});
		//计算距离
		var convertor=new sogou.maps.Convertor();
		function calcDistance(a)
		{
			var b=0,i;
			for(i=0;i<a.length;i++)
			{
				if(a[i+1]) b+=convertor.distance(a[i],a[i+1]);
			}
			return parseInt(b)
		}

侦听地图区移动和右键点击。移动时绘制跟随鼠标移动的线段。右键点击时结束绘制。

		sogou.maps.event.addListener(map,"mousemove",function(evt)
		{
			//evt.point 搜狗地图坐标
			path.length>0&&line.setPath(path.concat([evt.point]));
		
		});
		//点击右键结束
		sogou.maps.event.addListener(map,"rightclick",function(evt)
		{
			//evt.point 搜狗地图坐标
			line.remove();
			path=[];
		});

完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>搜狗地图 JavaScript API 示例:动态绘制曲线示例</title>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script type="text/javascript" src="http://api.go2map.com/maps/js/api_v2.5.1.js"></script>
<script type="text/javascript">
 /**
  * 动态绘制曲线示例
  * 可用鼠标在地图上点击确定节点，鼠标移到时动态跟随画线，类似于测距功能
  */
function initialize() 
{
		var myPoint = new sogou.maps.Point(12959000,4822625);
		//定义标记样式
		var markerStyle=new sogou.maps.MarkerImage('http://api.go2map.com/maps/images/v2.0/c31.png',
			  // 蓝点图标宽16像素，高14像素
			  new sogou.maps.Size(16, 14),
			  // 原点在图片的(34,88)
			  new sogou.maps.Point(34,88),
			  // 锚点在图标中心
			  new sogou.maps.Point(8,7),
			  // 合并图片的大小
			  new sogou.maps.Size(51, 156));
		//定义带箭头的样式
		var lineStyle={id:"L02","v:stroke":{color:"#0cf",weight:"5",endcap:"Round",opacity:"75%",endArrow:"Classic",endarrowlength:"long",endarrowwidth:"wide"}};
		var myOptions = {
		  zoom: 10,
		  center: myPoint,
		  mapTypeId: sogou.maps.MapTypeId.TERRAIN
		};

		var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);


		var line = new sogou.maps.Polyline({
			map:map,
			style:lineStyle,
			zIndex:2
		});
		var path=[],marker;
		sogou.maps.event.addListener(map,"click",function(evt)
		{
			//evt.point 搜狗地图坐标
			path.push(evt.point);
			//添加节点蓝点，计算路径距离
			marker=new sogou.maps.Marker({map:map,position:evt.point,icon:markerStyle,title:calcDistance(path)+"米",label:{visible:true}});
			if(path.length>1)
			{
				line = new sogou.maps.Polyline({
					map:map,
					styles:[lineStyle],
					zIndex:2
				});
				path=[];
				path.push(evt.point);
			}
		
		});
		sogou.maps.event.addListener(map,"mousemove",function(evt)
		{
			//evt.point 搜狗地图坐标
			path.length>0&&line.setPath(path.concat([evt.point]));
		
		});
		//点击右键结束
		sogou.maps.event.addListener(map,"rightclick",function(evt)
		{
			//evt.point 搜狗地图坐标
			line.remove();
			path=[];
		});
		//计算距离
		var convertor=new sogou.maps.Convertor();
		function calcDistance(a)
		{
			var b=0,i;
			for(i=0;i<a.length;i++)
			{
				if(a[i+1]) b+=convertor.distance(a[i],a[i+1]);
			}
			return parseInt(b)
		}
  }

</script>
</head>
<body onload="initialize()">
点击地图开始画线，点击右键结束画线
  <div id="map_canvas"></div>
</body>
</html>

动态绘制曲线示例

关键代码

代码解析

完整代码

运行代码