百度地图之VUE

百度地图之VUE

参考API网址

# 方式一:使用原生的api (推荐)
-- Web开发 JavaScript API 
http://lbsyun.baidu.com/index.php?title=jspopularGL

# 方式二:使用VUE百度地图组件 (请自行查阅相关资料)
-- 基于VUE封装的百度地图组件
https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

效果图

使用原生的api

第一步: 项目引入请求百度地图资源Js [loadMapApi.js]

//动态加载百度地图api
export default function loadMapApi(ak,other) {
    return new Promise(((resolve, reject) => {
        //先加载基础库api,再加载其他api或js依赖
        asyncLoadBaiduMapJsApi(ak).then(() => {
              if(other == 1){
                  asyncLoadJs("http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js").then(() => {
                  }).catch(err => {
                          reject(err)
                      })
                  asyncLoadJs("http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js").then(() => {
                  }).catch(err => {
                          reject(err)
                      })
                  asyncLoadJs("http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js").then(() => {
                      resolve();
                      return true
                  }).catch(err => {
                          reject(err)
                      })
              }else{
                  resolve();
                  return true
              }
          }).catch(err => {
              reject(err)
          })
    }))
}

/**
 * @description 加载百度地图基础组件js
 * @param {string} ak
 */
export function asyncLoadBaiduMapJsApi(ak) {
    return new Promise(((resolve, reject) => {
        if (typeof BMap !== 'undefined'){
            resolve(BMap);
            return true;
        }
        window.onBMapCallback = function () {
            resolve(BMap);
        }
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback';
        script.onerror = reject;
        document.head.appendChild(script);
    }))
}

/**
 * @description 加载第三方组件js公共方法
 * @param {string} url
 */
export function asyncLoadJs (url) {
    return new Promise((resolve, reject) => {
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = url
        document.head.appendChild(script)
        script.onload = () => {
            resolve()
        }
        script.onerror = reject
    })
}

第二步: 在地图页面引入js

<template>
    <!--地图-->
    <div  class="vueMap" id="vueMap"></div>
</template>

<script>
    import loadBMap from '../../../components/common/unit/loadMapApi'
    export default {
        name: "mapVue",
        data(){
            return{
                map: null,
                mapLevel:5,
                lng:105.994848,
                lat:36.354387,
            }
        },
        methods:{
            initPage(){
                loadBMap('AK',1).then(() => {
                    this.initBMap();
                }).catch(err => {
                    console.log(err);
                    console.log("地图加载失败");
                })
            },
            initBMap(){
                this.createMap() ; //创建地图
                this.setMapEvent();//设置地图事件
                this.addMapControl();//向地图添加控件
            },
            createMap(){
                var map = new BMap.Map("vueMap",
                    {
                        minZoom:5,// 最小显示级别
                        //maxZoom:11,// 最大显示级别
                        enableMapClick:false// 构造底图时，关闭底图可点功能
                    }
                );//在百度地图容器中创建一个地图
                var point = new BMap.Point(this.lng,this.lat);//定义一个中心点坐标
                map.centerAndZoom(point,this.mapLevel);//设定地图的中心点和坐标并将地图显示在地图容器中
                var self = this;
                self.map = map;
                window.map = map;//将map变量存储在全局
                // map.setMapStyleV2({styleJson:this.AppConfig.styleJson});
                // 监听停止拖拽地图时可视区域四角
                map.addEventListener('dragend', function(e) {
                });
                // 地图加载完毕
                map.addEventListener("tilesloaded",function(){
                });
                // 监听层级
                map.addEventListener('zoomend', function(e) {
                });
            },
            setMapEvent(){
                map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
                map.enableScrollWheelZoom();//启用地图滚轮放大缩小
                map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
                map.enableKeyboard();//启用键盘上下左右键移动地图
                map.enableInertialDragging();

                map.enableContinuousZoom();
            },
            addMapControl(){
                //向地图中添加缩放控件
                var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
                //map.addControl(ctrl_nav);
                //向地图中添加缩略图控件
                var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
                //map.addControl(ctrl_ove);
                //向地图中添加比例尺控件
                var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
                //map.addControl(ctrl_sca);
                // 城市列表控件
                var size = new BMap.Size(10, 20);
                var ctrl_cti =  new BMap.CityListControl({
                    anchor: BMAP_ANCHOR_TOP_LEFT,
                    offset: size,
                    // 切换城市之前事件
                    // onChangeBefore: function(){
                    //    alert('before');
                    // },
                    // 切换城市之后事件
                    // onChangeAfter:function(){
                    //   alert('after');
                    // }
                });
                map.addControl(ctrl_cti);
            },

        },
        mounted(){
            this.initPage();
        }
    }

</script>

<style>
    .vueMap{
        width:100%;
        height:860px;
        margin-top: 1px;
    }
    /* 去掉地图左下角的百度LOGO */
    .anchorBL {
        display:none
    }
</style>