您的位置:首页 > Web前端 > JavaScript

百度地图JSAPI实现加载当前位置并导航到目的地(web应用)

2017-07-10 16:40 736 查看
调用百度地图提供的api获取当前地理位置并导航到目的地(目的地需预先指定)

//html头部的引入信息
<style type="text/css">
#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度开发者中心申请到的密钥"></script>

//html内容
<div id="allmap"></div>

//尾部自定义js代码
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");

//创建步行规划对象
var walking = new BMap.WalkingRoute(map, {
renderOptions : {
map : map,
autoViewport : true
}
});

//获取当前的地理位置(百度地图转换后的经纬坐标)
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var opts = {
position : r.point, // 指定文本标注所在的地理位置
offset : new BMap.Size(30, -30)
//设置文本偏移量
}

//在地图上标注当前位置
var label = new BMap.Label("您的位置", opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily : "微软雅黑"
});
map.addOverlay(label);

//预先查找好的目的地经纬坐标(可通过百度开发者中心的坐标拾取器获得)
var dest = new BMap.Point(113.345954, 23.181294);
var opts1 = {
position : dest, // 指定文本标注所在的地理位置
offset : new BMap.Size(30, -30)
//设置文本偏移量
}
//在地图上标注目的地位置
var label1 = new BMap.Label("天河客运站", opts1); // 创建文本标注对象
label1.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily : "微软雅黑"
});
map.addOverlay(label1);

walking.search(r.point, dest);
addCon();
} else {
//获取当前位置失败时的处理
alert('获取当前位置坐标失败,默认导航为从天河客运站到天河客运站');
var dest = new BMap.Point(113.345954, 23.181294);
walking.search("天河客运站", dest);
addCon();
}
}, {
enableHighAccuracy : true
})

//添加百度地图缩放的控件
function addCon() {
var top_left_control = new BMap.ScaleControl({
anchor : BMAP_ANCHOR_TOP_LEFT
});// 左上角,添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角,添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({
anchor : BMAP_ANCHOR_TOP_RIGHT,
type : BMAP_NAVIGATION_CONTROL_SMALL
}); //右上角,仅包含平移和缩放按钮
/*缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL:仅包含平移和缩放按钮;
BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮;
BMAP_NAVIGATION_CONTROL_ZOOM:仅包含缩放按钮*/

//添加控件和比例尺
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
}
</script>


最后效果如图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: