<% @LANGUAGE="VBSCRIPT" CODEPAGE="65001" %>
|
<% Session.CodePage=65001 %>
|
<% Response.charset = "utf-8" %>
|
<!--#include virtual="/weixin/OAuth2.gds"-->
|
<!--#include virtual="/inc/function.gds"-->
|
<%
|
Set rs = Server.CreateObject("ADODB.Recordset")
|
lbs_key="KDJBZ-45QW2-I36UJ-CB53K-OUFE5-DJBQ5"
|
FromLatLng=trim(Request("FromLatLng"))
|
WaypointsLatLng=trim(Request("WaypointsLatLng"))
|
ToLatLng=trim(Request("ToLatLng"))
|
|
If FromLatLng<>"" Then
|
FromLatLngSP=SPLIT(FromLatLng,",")
|
FromLat=FromLatLngSP(0)
|
FromLng=FromLatLngSP(1)
|
End If
|
If WaypointsLatLng<>"" Then
|
WaypointsLatLngSP=SPLIT(WaypointsLatLng,",")
|
WaypointsLat=WaypointsLatLngSP(0)
|
WaypointsLng=WaypointsLatLngSP(1)
|
End If
|
If ToLatLng<>"" Then
|
ToLatLngSP=SPLIT(ToLatLng,",")
|
ToLat=ToLatLngSP(0)
|
ToLng=ToLatLngSP(1)
|
End If
|
If WaypointsLatLng<>"" Then '地图显示中心点
|
CenterLatLng=((CSng(FromLat)+CSng(WaypointsLat)+CSng(ToLat))/3)&","&((CSng(FromLng)+CSng(WaypointsLng)+CSng(ToLng))/3)
|
Else
|
CenterLatLng=((CSng(FromLat)+CSng(ToLat))/2)&","&((CSng(FromLng)+CSng(ToLng))/2)
|
End If
|
|
If WaypointsLatLng<>"" Then '地图缩放级别
|
sql="select Ceiling(6378137.0*ACOS(SIN("&ToLat&"/180*PI())*SIN("&FromLat&"/180*PI())+COS("&ToLat&"/180*PI())*COS("&FromLat&"/180*PI())*COS(("&ToLng&"-"&FromLng&")/180*PI()))),Ceiling(6378137.0*ACOS(SIN("&WaypointsLat&"/180*PI())*SIN("&FromLat&"/180*PI())+COS("&WaypointsLat&"/180*PI())*COS("&FromLat&"/180*PI())*COS(("&WaypointsLng&"-"&FromLng&")/180*PI()))),Ceiling(6378137.0*ACOS(SIN("&ToLat&"/180*PI())*SIN("&WaypointsLat&"/180*PI())+COS("&ToLat&"/180*PI())*COS("&WaypointsLat&"/180*PI())*COS(("&ToLng&"-"&WaypointsLng&")/180*PI())))"
|
Else
|
sql="select Ceiling(6378137.0*ACOS(SIN("&ToLat&"/180*PI())*SIN("&FromLat&"/180*PI())+COS("&ToLat&"/180*PI())*COS("&FromLat&"/180*PI())*COS(("&ToLng&"-"&FromLng&")/180*PI()))),0,0"
|
End If
|
rs.open sql,objConn,1,1
|
zoomscale=rs(0)
|
If zoomscale<rs(1) Then zoomscale=rs(1)
|
If zoomscale<rs(2) Then zoomscale=rs(2)
|
zoomscale=CLng(zoomscale/10)
|
rs.close()
|
|
if zoomscale <= 2000 then
|
zoom=12
|
elseif zoomscale <= 5000 then
|
zoom=11.5
|
elseif zoomscale <= 10000 then
|
zoom=11
|
elseif zoomscale <= 25000 then
|
zoom=10.5
|
elseif zoomscale <= 20000 then
|
zoom=10
|
elseif zoomscale <= 25000 then
|
zoom=9.5
|
elseif zoomscale <= 30000 then
|
zoom=9
|
elseif zoomscale <= 40000 then
|
zoom=8.5
|
elseif zoomscale <= 50000 then
|
zoom=8
|
elseif zoomscale <= 85000 then
|
zoom=7.5
|
elseif zoomscale <= 100000 then
|
zoom=7
|
elseif zoomscale <= 150000 then
|
zoom=6.5
|
elseif zoomscale <= 200000 then
|
zoom=6
|
elseif zoomscale <= 500000 then
|
zoom=5
|
elseif zoomscale <= 1000000 then
|
zoom=4
|
End If
|
%>
|
|
<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>路线规划</title>
|
</head>
|
<script charset="utf-8"
|
src="https://map.qq.com/api/gljs?v=1.exp&key=<%=lbs_key%>"></script>
|
<style>
|
html,
|
body {
|
height: 100%;
|
margin: 0px;
|
padding: 0px;
|
}
|
|
#mapContainer {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
|
<body onload="initMap()">
|
<div id="mapContainer"></div>
|
</body>
|
|
</html>
|
<script>
|
//注：本例仅为说明流程，不保证严谨
|
|
var map;
|
function initMap(){
|
//初始化地图
|
map = new TMap.Map('mapContainer', {
|
center: new TMap.LatLng(<%=CenterLatLng%>),//地图显示中心点
|
zoom:<%=zoom%> //缩放级别
|
});
|
|
//WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）
|
var url="https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
|
url+="?from=<%=FromLatLng%>"; //起点坐标
|
<%if WaypointsLatLng<>"" then Response.Write "url+=""&waypoints="&WaypointsLatLng&""";"%>
|
url+="&to=<%=ToLatLng%>"; //终点坐标
|
url+="&output=jsonp&callback=cb" ; //指定JSONP回调函数名，本例为cb
|
url+="&key=<%=lbs_key%>"; //开发key，可在控制台自助创建
|
|
|
//发起JSONP请求，获取路线规划结果
|
jsonp_request(url);
|
}
|
|
//浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
|
function jsonp_request(url){
|
var script=document.createElement('script');
|
script.src=url;
|
document.body.appendChild(script);
|
}
|
|
//定义请求回调函数，在此拿到计算得到的路线，并进行绘制
|
function cb(ret){
|
var coords = ret.result.routes[0].polyline, pl = [];
|
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
|
var kr = 1000000;
|
for (var i = 2; i < coords.length; i++) {
|
coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
|
}
|
//将解压后的坐标放入点串数组pl中
|
for (var i = 0; i < coords.length; i += 2) {
|
pl.push(new TMap.LatLng(coords[i], coords[i+1]));
|
}
|
|
display_polyline(pl)//显示路线
|
|
//标记起终点marker
|
var marker = new TMap.MultiMarker({
|
id: 'marker-layer',
|
map: map,
|
styles: {
|
"start": new TMap.MarkerStyle({
|
"width": 25,
|
"height": 35,
|
"anchor": { x: 16, y: 32 },
|
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
|
}),
|
"Waypoints": new TMap.MarkerStyle({
|
"width": 25,
|
"height": 35,
|
"anchor": { x: 16, y: 32 },
|
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png'
|
}),
|
"end": new TMap.MarkerStyle({
|
"width": 25,
|
"height": 35,
|
"anchor": { x: 16, y: 32 },
|
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
|
})
|
},
|
geometries: [{
|
"id": 'start',
|
"styleId": 'start',
|
"position": new TMap.LatLng(<%=FromLatLng%>)
|
},
|
<%If WaypointsLatLng<>"" Then%>
|
{
|
"id": 'Waypoints',
|
"styleId": 'Waypoints',
|
"position": new TMap.LatLng(<%=WaypointsLatLng%>)
|
},
|
<%end if %>
|
{
|
"id": 'end',
|
"styleId": 'end',
|
"position": new TMap.LatLng(<%=ToLatLng%>)
|
}]
|
});
|
|
}
|
|
function display_polyline(pl){
|
//创建 MultiPolyline显示折线
|
var polylineLayer = new TMap.MultiPolyline({
|
id: 'polyline-layer', //图层唯一标识
|
map: map,//绘制到目标地图
|
//折线样式定义
|
styles: {
|
'style_blue': new TMap.PolylineStyle({
|
'color': '#3777FF', //线填充色
|
'width': 8, //折线宽度
|
'borderWidth': 5, //边线宽度
|
'borderColor': '#FFF', //边线颜色
|
'lineCap': 'round', //线端头方式
|
})
|
},
|
//折线数据定义
|
geometries: [
|
{
|
'id': 'pl_1',//折线唯一标识，删除时使用
|
'styleId': 'style_blue',//绑定样式名
|
'paths': pl
|
}
|
]
|
});
|
}
|
|
</script>
|
