基于qq.maps.com的web地图定位导航

来源：互联网发布：gta4优化补丁告别卡顿编辑：程序博客网时间：2024/05/29 08:22

<!DOCTYPE html>
<html>
<meta charset="GBK">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>根据起终点经纬度查询驾车路线</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
min-width:600px;
min-height:767px;
}
</style>
<script charset="GBK" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
// 定义对象
var map,
directionsService = new qq.maps.DrivingService({
complete : function(response){
var start = response.detail.start,
end = response.detail.end;

var anchor = new qq.maps.Point(6, 6),
size = new qq.maps.Size(24, 36),
start_icon = new qq.maps.MarkerImage(
'img/busmarker.png',
size,
new qq.maps.Point(0, 0),
anchor
),
end_icon = new qq.maps.MarkerImage(
'img/busmarker.png',
size,
new qq.maps.Point(24, 0),
anchor

);
start_marker && start_marker.setMap(null);
end_marker && end_marker.setMap(null);
clearOverlay(route_lines);

start_marker = new qq.maps.Marker({
icon: start_icon,
position: start.latLng,
map: map,
zIndex:1
});
end_marker = new qq.maps.Marker({
icon: end_icon,
position: end.latLng,
map: map,
zIndex:1
});
directions_routes = response.detail.routes;
var routes_desc=[];
//所有可选路线方案
for(var i = 0;i < directions_routes.length; i++){
var route = directions_routes[i],
legs = route;
//调整地图窗口显示所有路线
map.fitBounds(response.detail.bounds);
//所有路程信息
//for(var j = 0 ; j < legs.length; j++){
var steps = legs.steps;
route_steps = steps;
polyline = new qq.maps.Polyline(
{
path: route.path,
strokeColor: '#3893F9',
strokeWeight: 6,
map: map
}
)
route_lines.push(polyline);
//所有路段信息
for(var k = 0; k < steps.length; k++){
var step = steps[k];
//路段途经地标
directions_placemarks.push(step.placemarks);
//转向
var turning = step.turning,
img_position;;
switch(turning.text){
case '左转':
img_position = '0px 0px'
break;
case '右转':
img_position = '-19px 0px'
break;
case '直行':
img_position = '-38px 0px'
break;
case '偏左转':
case '靠左':
img_position = '-57px 0px'
break;
case '偏右转':
case '靠右':
img_position = '-76px 0px'
break;
case '左转调头':
img_position = '-95px 0px'
break;
default:
mg_position = ''
break;
}
var turning_img = '  <span'+
' style="margin-bottom: -4px;'+
'display:inline-block;background:'+
'url(img/turning.png) no-repeat '+
img_position+';width:19px;height:'+
'19px"></span> ' ;
var p_attributes = [
'onclick="renderStep('+k+')"',
'onmouseover=this.style.background="#eee"',
'onmouseout=this.style.background="#fff"',
'style="margin:5px 0px;cursor:pointer"'
].join(' ');
routes_desc.push('<p '+p_attributes+' ><b>'+(k+1)+
'.</b>'+turning_img+step.instructions);
}
//}
}
//方案文本描述
var routes=document.getElementById('routes');
routes.innerHTML = routes_desc.join('<br>');
}
}),
directions_routes,
directions_placemarks = [],
directions_labels = [],
start_marker,
end_marker,
route_lines = [],
step_line,
route_steps = [];
//地址和经纬度之间进行转换服务
geocoder_s = new qq.maps.Geocoder();
geocoder_e = new qq.maps.Geocoder();
geocoder = new qq.maps.Geocoder();
var lat;
var lng;
var lat2;
var lng2;
// 信息表示窗口
var info_s,info_e;
// 当前位置的中心经纬度 (初始北京的经纬度)
var curr_lat ,curr_lng ;

function init() {
// 当前位置信息
getLocation();

// 设置地图中心点
map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(curr_lat,curr_lng)
});

// 计算路线
calcRoute();
}

function showPosition(position)
{
curr_lat = position.coords.latitude;
curr_lng = position.coords.longitude;
// 逆地址解析，设置起点的地址位置
var latLng = new qq.maps.LatLng(curr_lat, curr_lng);
geocoder.getAddress(latLng);
geocoder.setComplete(function(result) {
alert( "您所在的位置:纬度" + curr_lat + ",经度" + curr_lng +"\n 位于 "+result.detail.address);
document.getElementById("start").value = result.detail.address;
});
}

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("用户拒绝对获取地理位置的请求。");
break;
case error.POSITION_UNAVAILABLE:
alert("位置信息是不可用的。");
break;
case error.TIMEOUT:
alert("请求用户地理位置超时。");
break;
case error.UNKNOWN_ERROR:
alert("未知错误。" );
break;
}
}
function getLocation()
{
var position_option = {
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 20000
};
// 获取浏览器的位置
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError,position_option);
}
else
{
alert("该浏览器不支持获取地理位置。");
}
}

function showMakers( start, end)
{
// 获取起终点位置信息
var start_addr = new qq.maps.LatLng(start[0], start[1]);
var end_addr = new qq.maps.LatLng(end[0],end[1]);
start_marker = new qq.maps.Marker({
icon: start_icon,
position: start_addr,
map: map,
zIndex:1
});
end_marker = new qq.maps.Marker({
icon: end_icon,
position: end_addr,
map: map,
zIndex:1
});
////设置Marker自定义图标的属性
var anchor = new qq.maps.Point(0, 20),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
icon = new qq.maps.MarkerImage(
"img/busmarker.png",
size,
origin,
anchor
);
start_marker.setIcon(icon);
end_marker.setIcon(icon);

//设置Marker阴影图片属性
var anchorb = new qq.maps.Point(3, 10),
sizeb = new qq.maps.Size(42, 11),
origin = new qq.maps.Point(0, 0),
iconb = new qq.maps.MarkerImage(
"img/busmarker.png",
sizeb,
origin,
anchorb
);
start_marker.setShadow(iconb);
end_marker.setShadow(iconb);
}

function calcRoute() {

// 获取输入的地址
var start_addr = document.getElementById("start").value;
var end_addr = document.getElementById("end").value;

route_steps = [];

// 每次更新地图前,需要首先清空Maker
//start_marker.setMap(null);
//end_marker.setMap(null);

//添加信息窗口
info_s = new qq.maps.InfoWindow({
map: map
});
info_e = new qq.maps.InfoWindow({
map: map
});

//对起始地址进行解析
geocoder_s.getLocation(start_addr);
//设置服务请求成功的回调函数
geocoder_s.setComplete(function(result)
{
map.setCenter(result.detail.location);
start_marker = new qq.maps.Marker({
map: map,
position: result.detail.location,
title:start_addr
});
//点击Marker会弹出反查结果
qq.maps.event.addListener(start_marker, 'click', function() {
alert("坐标地址为:" +start_addr);
});
// 获取经纬度信息
lat = result.detail.location.getLat();
lng = result.detail.location.getLng();
// 开始地标信息
info_s.open();
info_s.setContent("当前位置:"+start_addr);
info_s.setPosition(start_marker.getPosition());

} );
//若服务请求失败，则运行以下函数
geocoder_s.setError(function() { alert("请输入正确的地址！"); });

//对终止地址进行解析
geocoder_e.getLocation(end_addr);
//设置服务请求成功的回调函数
geocoder_e.setComplete(function(result)
{
map.setCenter(result.detail.location);
end_marker = new qq.maps.Marker({
map: map,
position: result.detail.location,
title:end_addr
});
//点击Marker会弹出反查结果
qq.maps.event.addListener(end_marker, 'click', function() {
alert("坐标地址为:" + end_addr);
});
// 获取经纬度信息
lat2 = result.detail.location.getLat();
lng2 = result.detail.location.getLng();
// 结束地标信息
info_e.open();
info_e.setContent("目的地:"+end_addr);
info_e.setPosition(end_marker.getPosition());
} );
//若服务请求失败，则运行以下函数
geocoder_e.setError(function() { alert("请输入正确的地址！"); });

// 选路策略
var policy = document.getElementById("policy").value;

// 设置车程范围
directionsService.setLocation(start_addr);
directionsService.setPolicy(qq.maps.DrivingPolicy[policy]);
directionsService.search(new qq.maps.LatLng(lat,lng),
new qq.maps.LatLng(lat2,lng2));

// 显示自定义maker图标
//showMakers( start_name, end_name);

}

//清除地图上的marker
function clearOverlay(overlays){
var overlay;
while(overlay = overlays.pop()){
overlay.setMap(null);
}
}
function renderStep(index){
var step = route_steps[index];
//clear overlays;
step_line && step_line.setMap(null);
//draw setp line
step_line = new qq.maps.Polyline(
{
path: step.path,
strokeColor: '#ff0000',
strokeWeight: 6,
map: map
}
)
}
//显示路段路标
function showP(){
var showPlacemark = document.getElementById('sp');
if(showPlacemark.checked){
for(var i=0;i<directions_placemarks.length;i++){
var placemarks = directions_placemarks[i];
for(var j=0;j<placemarks.length;j++){
var placemark = placemarks[j];
var label = new qq.maps.Label({
map: map,
position: placemark.latLng,
content:placemark.name
});
directions_labels.push(label);
}
}
}else{
clearOverlay(directions_labels);
}
}

</script>

</head>
<body onload="init();">
<div style='margin:5px 0px'>
<b>起点: </b>
<input type="text" id="start" value="清华大学"/>

<b>终点: </b>
<input type="text" id="end" value="北京故宫"/>
<input type="button" value="开始定位" onclick="calcRoute()" />
  
<b>计算策略：</b>
<select id="policy" onchange="calcRoute();">
<option value="LEAST_TIME">最少时间</option>
<option value="LEAST_DISTANCE">最短距离</option>
<option value="AVOID_HIGHWAYS">避开高速</option>
<option value="REAL_TRAFFIC">实时路况</option>
<option value="PREDICT_TRAFFIC">预测路况</option>
</select>
<label>
<input id="sp" type="checkbox" value='1' onclick='showP()'/>
显示路段地标
</label>
</div>
<div id="container"></div>
<div style="width:603px;padding-top:5px" id="routes"></div>
</body>
</html>

0 0