Vue引入百度地图增加导航功能

        这两天在开发项目的过程中遇到一个需求需要引入百度地图增加导航功能，话不多说直接上代码

 首先引入百度地图API输入在百度地图API申请的秘钥

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=申请的key"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=申请的key"></script>
<link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script src="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

随后我们先初始化地图

<div id="wapmap" class="amap-wrapper"></div>

mounted() {
        this.BaiDuMapInit();
    },
    methods:{
         // 初始化地图
        BaiDuMapInit() {
            let wapmap = new BMap.Map("wapmap");
            wapmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            wapmap.clearOverlays(); // 清除覆盖物
            let point = new BMap.Point(116.404269,39.916042);
            wapmap.centerAndZoom(point, 15);
        }
    }

创建检索信息窗口对象

 var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                    '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                    '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
                  '</div>';
    //创建检索信息窗口对象
    var searchInfoWindow = null;
	searchInfoWindow = new BMapLib.SearchInfoWindow(wapmap , content, {
			title  : "月亮大厦",      //标题
			width  : 290,             //宽度
			height : 105,              //高度
			panel  : "panel",         //检索结果面板
			enableAutoPan : true,     //自动平移
			searchTypes   :[
				BMAPLIB_TAB_SEARCH,   //周边检索
				BMAPLIB_TAB_TO_HERE,  //到这里去
				BMAPLIB_TAB_FROM_HERE //从这里出发
			]
		});

添加marker对象

 var marker = new BMap.Marker(poi); //创建marker对象
    marker.enableDragging(); //marker可拖拽
    marker.addEventListener("click", function(e){
	    searchInfoWindow.open(marker);
    })
    wapmap.addOverlay(marker); //在地图中添加marker

最终页面展示效果

 完整代码

<template>
    <div class="Map">
        <div id="wapmap" class="amap-wrapper"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        this.BaiDuMapInit();
    },
    methods: {
        // 初始化地图
        BaiDuMapInit() {
            let wapmap = new BMap.Map("wapmap");
            wapmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            wapmap.clearOverlays(); // 清除覆盖物
            let point = new BMap.Point(116.404269, 39.916042);
            wapmap.centerAndZoom(point, 15);
            var content =
                '<div style="margin:0;line-height:20px;padding:2px;">' +
                '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                "地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：月亮大厦位于北京市海淀区西二旗地铁站附近，为综合研发及办公总部。" +
                "</div>";
            //创建检索信息窗口对象
            var searchInfoWindow = null;
            searchInfoWindow = new BMapLib.SearchInfoWindow(wapmap, content, {
                title: "月亮大厦", //标题
                width: 290, //宽度
                height: 105, //高度
                panel: "panel", //检索结果面板
                enableAutoPan: true, //自动平移
                searchTypes: [
                    BMAPLIB_TAB_SEARCH, //周边检索
                    BMAPLIB_TAB_TO_HERE, //到这里去
                    BMAPLIB_TAB_FROM_HERE, //从这里出发
                ],
            });
            var marker = new BMap.Marker(point); //创建marker对象
            marker.enableDragging(); //marker可拖拽
            marker.addEventListener("click", function (e) {
                searchInfoWindow.open(marker);
            });
            wapmap.addOverlay(marker); //在地图中添加marker
        },
    },
};
</script>

<style lang="scss" scoped>
.Map {
    position: fixed;
    width: 100%;
    height: 100%;
    .amap-wrapper {
        width: 100%;
        height: 100%;
    }
}
</style>