自驾搜索结果显示

此示例是一个自驾车搜索。搜索从西单到搜狐网络大厦,的驾车路线。并显示在地图上。

关键代码

var request={
     'map':map,       
     'destination':'搜狐网络大厦',
     'origin':'西单',
     'tactic':2       //驾车策略。 0: 距离短;1 :时间短 默认策略 (不选为1);2 :不走高速

}
var nav=new sogou.maps.Driving();
nav.route(request);
nav.setRenderer(new sogou.maps.DrivingRenderer({'panel':document.getElementById('result')}));
			

代码解析

首先要先初始化一个自驾车实例,设置请求参数。调用route方法。

var request={
     'map':map,       
     'destination':'搜狐网络大厦',
     'origin':'西单',
     'tactic':0       
}
var nav=new sogou.maps.Driving();
nav.route(request);
			

接下来将查询结果显示到地图上,需要先初始化渲染类。再调用自驾的setRenderer方法,进行结果渲染。

			nav.setRenderer(new sogou.maps.DrivingRenderer({'panel':document.getElementById('result')}));
			

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自驾搜索</title>
<style type="text/css">
#map{position:absolute;width:400px; height:600px;}
</style>
<script type="text/javascript" src="http://api.go2map.com/maps/js/api_v2.5.1.js"></script>
</head>

<body>
    <div id="map" style="float:left"></div>
	<div id="result" style="margin-left:500px;font-size:12px;">
		
	</div>
</body>
<script>

 var myLatLng = new sogou.maps.Point(12957062,4827187);
    var myOptions = {
      zoom: 10,
      center: myLatLng
    };
    var map = new sogou.maps.Map(document.getElementById("map"), myOptions);


var request={
     'map':map,       
     'destination':'搜狐网络大厦',
     'origin':'西单',
     'tactic':0       
}
var nav=new sogou.maps.Driving();
nav.route(request);
nav.setRenderer(new sogou.maps.DrivingRenderer({'panel':document.getElementById('result')}));
</script>
</html>
			

运行代码