代码如下,包自己引
包参考
一个百度MAP导航的基础封装
使用的是浏览器调用gps定位
修改了标注的大小
效果如图:
代码......
<!DOCTYPE html>
<html>
<head>
<title>map-index.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no" />
<style type="text/css">
.anchorBL {
display: none;
} #map-page-in .btn {
font-size: 27px;
}
</style>
</head>
<body>
<div id='map-page-in' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='padding:10px'>
<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='border:1px solid #bbbbbb;box-shadow: 2px 2px 2px #aaaaaa'>
<!-- 地图 -->
<div id="map" style="height:900px" class='col-lg-12 col-md-12 col-sm-12 col-xs-12'></div>
<!-- 搜索控件 -->
<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='position:absolute;padding:5px 20px 0px 40px;top:0px'>
<!-- 关闭按钮 -->
<!-- <div style='position:absolute;top:7px;left:2px'>
<button class='btn btn-primary btn-lg' onclick="removeAll();$('#map-page').hide(300)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div> -->
<input id='search-input' type="text" class="form-control" style='height:65px;border-color:green'>
<div style='position:absolute;top:10px;right:30px;'>
<button id='search-location-btn' class='btn btn-success btn-lg' onclick='locationSearch("map")'>
<span class="glyphicon glyphicon-search"></span> 搜索
</button>
<button class='btn btn-primary btn-lg' title='自己到目标的步行或骑行路线规划' onclick='goTo("walk")'>步/骑</button>
<button class='btn btn-primary btn-lg' title='自己到目标的公交路线规划' onclick='goTo("bus")'>公交</button>
<button class='btn btn-primary btn-lg' title='自己到目标的自驾车路线规划' onclick='goTo("car")'>驾车</button>
</div>
</div>
<!-- 地图类型切换按钮 -->
<div style='position:absolute;top:75px;right:25px'>
<button class='btn btn-primary btn-lg' onclick="switchMap()" title='切换地图显示'>
<span class="glyphicon glyphicon-globe"></span>
</button>
</div>
<!-- 标记自身 -->
<div style='position: absolute;left:5px;bottom:5px'>
<button class='btn btn-success btn-lg' title='刷新自己的定位' onclick='myLocationClick()'>
<span class="glyphicon glyphicon-screenshot"></span> 我
</button>
<button class='btn btn-warning btn-lg' onclick='removeAll()'>
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<!-- 自定义路线开启关闭 -->
<div style='position: absolute;right:5px;bottom:5px'>
<button style='display:none' class='customline btn btn-info btn-lg' onclick='myLine("walk")'>步/骑路线</button>
<button style='display:none' class='customline btn btn-info btn-lg' onclick='myLine("bus")'>公交路线</button>
<button style='display:none' class='customline btn btn-info btn-lg' onclick='myLine("car")'>驾车路线</button>
<button id='customLine' class='btn btn-success btn-lg' onclick='customLine()'>自定义路线开启</button>
</div>
<!-- 调用百度地图html或app导航链接按钮 -->
<div style='position: absolute;right:5px;bottom:75px'>
<button id='nav-baidu' style='display:none' class='customline btn btn-info btn-lg' onclick='navToBaidu()'>百度APP导航</button>
</div>
</div>
</div>
<!-- 路线规划结果 -->
<div id='line-result' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='padding:10px'></div>
</body>
<script type="text/javascript">
$(function() {
$('#map').css('height', $(window).height() - 250 + 'px'); initMap('map'); //加载页面初始化map
}) //我的当前定位的缓存
var mypoint = {
point : {
lat : null,
lng : null,
}
};
//地图全局变量
var map = null;
//存入两个坐标点供自定义路线导航的栈
var line = [];
//单击地图的目标定位
var target = null; /**
* 地图初始化函数
*/
function initMap(id) {
map = new BMap.Map(id); // 创建地图实例
map.centerAndZoom('北京', 14); //设置中心点
map.enableScrollWheelZoom(true); //允许滚轮操作
//map.disableDoubleClickZoom(); //关闭双击放大功能
//map.enableKeyboard(); //开启键盘操作功能 //获取当前定位位置
myLocation(); //添加单击监听事件
map.addEventListener("click", function(e) { //获取一个点的定位存入为目标点
target = e;
}); //搜索框回车键监听
$('#search-input').keydown(function(e) { //搜索框激活下按键盘回车键执行搜索
if (event.keyCode == 13) {
$("#search-location-btn").click();
}
})
} var mapType = 0; //三种地图切换的标记
function switchMap() {
if (mapType == 0) {
map.setMapType(BMAP_HYBRID_MAP); //卫星路网
mapType = 1;
} else if (mapType == 1) {
map.setMapType(BMAP_SATELLITE_MAP); //卫星地图
mapType = 2;
} else if (mapType == 2) {
map.setMapType(BMAP_NORMAL_MAP); //普通地图
mapType = 0;
}
} /**
* 自定义路线监听开启函数
*/
customLineFlag = false; //自定义路线的开启/关闭标记
function customLine() {
if (customLineFlag == false) { //开启自定义路线
//map.addEventListener("click", getLinePoint);
map.addEventListener("touchend", getLinePoint);
customLineFlag = true;
$('#customLine').html('自定义路线开启中');
$('.customline').show();
} else { //关闭自定义路线
//map.removeEventListener("click", getLinePoint);
map.removeEventListener("touchend", getLinePoint);
customLineFlag = false;
$('#customLine').html('自定义路线已关闭');
$('.customline').hide();
}
} /**
* 自定义路线监听的回调函数
*/
function getLinePoint(e) {
if (line.length > 1) { //自定义路线的点有两个
line.splice(0, 1); //删掉旧的
line.push(e); //插入新点
} else { //自定义路线的点不足两个
line.push(e); //插入新点
}
map.clearOverlays(); //清除当前标注 for (var i = 0; i < line.length; i++) { //重新规划标注
var point = new BMap.Point(line[i].point.lng, line[i].point.lat);
var label = new BMap.Label(i == 0 ? "起" : '终', { //标注上的文字
offset : new BMap.Size(3, 3) //标注文字偏移到标注中心
});
label.setStyle({
'border' : "none",
'background' : 'none',
'color' : 'white',
'border-radius' : '10%',
'width' : '50px',
'height' : '50px',
'font-size' : '25px',
})
addMarker(point, label); //添加标注
}
} /**
* 从自身定位点到目标点的线路规划
*/
//lyhFloatTip2的相关代码的链接为:
function goTo(key) {
if (null == mypoint) { //自身定位未完成提示
lyhFloatTip2("<span class='h3'>正在对自己位置进行定位,请稍后...</span>");
return null;
}
if (null == target) { //没有选择目标点
lyhFloatTip2("<span class='h3'>未点选目标位置!</span>");
return null;
}
var start = new BMap.Point(mypoint.point.lng, mypoint.point.lat);
var end = new BMap.Point(target.point.lng, target.point.lat);
removeAll();
if (key == 'walk') { //徒步,骑行线路规划
var walking = new BMap.WalkingRoute(map, {
renderOptions : {
map : map,
panel : "line-result", //结果显示面板
autoViewport : true,
}
});
walking.search(start, end); //执行搜索
} else if (key == 'bus') { //公交线路规划
var transit = new BMap.TransitRoute(map, {
renderOptions : {
map : map,
panel : "line-result", //结果显示面板
autoViewport : true,
},
});
transit.search(start, end); //执行搜索
} else if (key == 'car') { //自驾车线路规划
var driving = new BMap.DrivingRoute(map, {
renderOptions : {
map : map,
panel : "line-result", //结果显示面板
autoViewport : true,
}
});
driving.search(start, end); //执行搜索
}
$('#nav-baidu').show(300); //有线路规划后,展示app按钮,可直接进入百度app
} /**
* 跳转到百度app或百度地图导航的函数
*/
function navToBaidu() {
if (null == target) {
lyhFloatTip2("请点击地图选择要导航的目标位置...");
} else {
var lng = target.point.lng;
var lat = target.point.lat;
window.open("http://api.map.baidu.com/marker?location=" + lat + "," + lng + "&title=目的位置&output=html"); //在新窗口打开连接
console.log("http://api.map.baidu.com/marker?location=" + lat + "," + lng + "&title=目的位置&output=html"); //打开的链接
}
} /**
* 搜索目标位置函数
*/
function locationSearch() {
var val = $('#search-input').val();
var local = new BMap.LocalSearch(map, {
renderOptions : {
map : map
}
});
local.search(val); //以名称搜索位置并显示在地图哄
} /**
* 定位到自身所在位置的函数
*/
var mapLocationTimerCount = 0;
function myLocation() {
var pointGet = setInterval(function() {
getLocation();
if (mypoint.point.lat != null) {
var point = new BMap.Point(mypoint.point.lng, mypoint.point.lat);
var label = new BMap.Label('我', {
offset : new BMap.Size(3, 3)
}); //生成自己的定位的标记
label.setStyle({ //修改自己的定位的标记的样式
'border' : "none",
'background' : 'none',
'color' : 'white',
'border-radius' : '50%',
'width' : '20px',
'height' : '20px',
'font-size' : '25px',
})
//$('#line-result').append(mypoint.point.lng + ' : ' + typeof mypoint.point.lng + ';<br>');
//$('#line-result').append(mypoint.point.lat + ' : ' + typeof mypoint.point.lat + ';<br>');
line = []; //初始化线路规划
line.push(mypoint); //存入当前自身定位
addMarker(mypoint.point, label); //加载标注
clearInterval(pointGet); //清除计时器
}
}, 1000)
} function myLocationClick() {
if (mypoint.point.lat != null) {
map.panTo(mypoint.point); //将自身定位作为地图中心
} else {
lyhFloatTip2("<span class='h3'>定位中...</span>")
}
} //===
function getLocation() {
//判断浏览器是否支持geolocation
if (navigator.geolocation) {
// getCurrentPosition支持三个参数
// getSuccess是执行成功的回调函数
// getError是失败的回调函数
// getOptions是一个对象，用于设置getCurrentPosition的参数
// 后两个不是必要参数
var getOptions = {
//是否使用高精度设备，如GPS。默认是true
enableHighAccuracy : true,
//超时时间，单位毫秒，默认为0
timeout : 45000,
//使用设置时间内的缓存数据，单位毫秒
//默认为0，即始终请求新数据
//如设为Infinity，则始终使用缓存数据
maximumAge : 0
}; //成功回调
function getSuccess(position) {
//$('#line-result').append(position.coords.latitude)
// getCurrentPosition执行成功后，会把getSuccess传一个position对象
// position有两个属性，coords和timeStamp
// timeStamp表示地理数据创建的时间？？？？？？
// coords是一个对象，包含了地理位置数据
console.log(position.timeStamp);
// 估算的纬度
console.log(position.coords.latitude);
mypoint.point.lat = position.coords.latitude;
// 估算的经度
console.log(position.coords.longitude);
mypoint.point.lng = position.coords.longitude;
// 估算的高度 (以米为单位的海拔值)
console.log(position.coords.altitude);
// 所得经度和纬度的估算精度，以米为单位
console.log(position.coords.accuracy);
// 所得高度的估算精度，以米为单位
console.log(position.coords.altitudeAccuracy);
// 宿主设备的当前移动方向，以度为单位，相对于正北方向顺时针方向计算
console.log(position.coords.heading);
// 设备的当前对地速度，以米/秒为单位
console.log(position.coords.speed);
// 除上述结果外，Firefox还提供了另外一个属性address
if (position.address) {
//通过address，可以获得国家、省份、城市
console.log(position.address.country);
console.log(position.address.province);
console.log(position.address.city);
}
}
//失败回调
function getError(error) {
// 执行失败的回调函数，会接受一个error对象作为参数
// error拥有一个code属性和三个常量属性TIMEOUT、PERMISSION_DENIED、POSITION_UNAVAILABLE
// 执行失败时，code属性会指向三个常量中的一个，从而指明错误原因
switch (error.code) {
case error.TIMEOUT:
console.log('超时');
break;
case error.PERMISSION_DENIED:
console.log('用户拒绝提供地理位置');
break;
case error.POSITION_UNAVAILABLE:
console.log('地理位置不可用');
break;
default:
break;
}
} navigator.geolocation.getCurrentPosition(getSuccess, getError, getOptions);
// watchPosition方法一样可以设置三个参数
// 使用方法和getCurrentPosition方法一致，只是执行效果不同。
// getCurrentPosition只执行一次
// watchPosition只要设备位置发生变化，就会执行
var watcher_id = navigator.geolocation.watchPosition(getSuccess, getError, getOptions);
//clearwatch用于终止watchPosition方法
navigator.geolocation.clearWatch(watcher_id);
}
} //=== /**
* 绘制路线 徒步-骑行-公交-驾车
*/
function myLine(key) {
if (line.length < 2) { //路线点少于2个提示
lyhFloatTip2("<span class='h3'>需要两个点才可以进行规划路线!</span>");
return null;
}
var start = new BMap.Point(line[0].point.lng, line[0].point.lat); //获取存入的起点
var end = new BMap.Point(line[1].point.lng, line[1].point.lat); //获取存入的终点
map.clearOverlays(); //清除之前的mk
lyhFloatTip2("<span class='h3'>路线查询中,请稍后...</span>")
if (key == 'walk') { //步行,骑行规划
var walking = new BMap.WalkingRoute(map, {
renderOptions : {
map : map,
panel : "line-result",
autoViewport : true,
}
});
walking.search(start, end);
} else if (key == 'bus') { //公交规划
var transit = new BMap.TransitRoute(map, {
renderOptions : {
map : map,
panel : "line-result",
autoViewport : true,
},
});
transit.search(start, end);
} else if (key == 'car') { //自驾规划
var driving = new BMap.DrivingRoute(map, {
renderOptions : {
map : map,
panel : "line-result",
autoViewport : true,
}
});
driving.search(start, end);
}
customLine();
} /**
* 创建标注中心带文字的自定义函数
*/
function addMarker(point, label) {
var marker = new BMap.Marker(point);
//console.log(marker.getIcon())
var icon = new BMap.Icon('http://api0.map.bdimg.com/images/marker_red_sprite.png', new BMap.Size(200, 400), {
anchor : new BMap.Size(22, 40),
infoWindowAnchor : new BMap.Size(10, 0),
imageSize : new BMap.Size(80, 50),
});
marker.setIcon(icon)
//console.log(marker.getIcon())
map.addOverlay(marker);
marker.setLabel(label);
} /**
* 删除所有当前标注
*/
function removeAll() {
map.clearOverlays();
}
</script>
</html>
以上!!