VUE2.0 +百度地图javascript API示例

YJ_0518

已于 2023-04-25 16:41:56 修改

阅读量1.6k

点赞数 3

分类专栏： vue 百度地图文章标签： javascript vue.js

于 2023-04-25 16:38:46 首次发布

本文链接：https://blog.csdn.net/weixin_45606890/article/details/130367841

版权

vue 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

百度地图

1 篇文章 0 订阅

订阅专栏

首先到百度地图官网以开发者身份申请一个百度地图ak密钥。
链接地址：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey

一、全局引入百度地图

在vue项目的index.html中来引入百度地图apiscript脚本：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

<template>
   <div ref={'map'} className={styles.map} />
</template>
 
<script>
  export default {
    name: 'MapPage',
    props: {},
    data() {
      return {
        map: null, // 地图容器
      }
    },
    mounted() {
        this.map = new BMap.Map(this.$refs.map); // 创建Map实例
        // 初始化地图,设置中心点坐标和地图级别
        this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
        // 开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true); 
    },
    components: {},
    methods: {},
    watch: {}
  }
</script>
 
<style scoped lang="scss">
  .map{
      width:500px;
      height:500px;
  }
</style>

二、引入并使用组件化的百度地图（vue-baidu-map）

官方文档:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage

全局注册

在main.js中引入

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

在组件中使用：

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

局部注册

在组件中使用：

<template>
  <baidu-map class="bm-view" ak="YOUR_APP_KEY">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

CDN 全局注册

<script>
Vue.use(VueBaiduMap.default, {
  ak: 'YOUR_APP_KEY'
})
</script>

实例化map和百度地图构造函数

可以通过调用该方法将实例化的map和百度地图构造函数BMap导出，然后再操作实例化的map来实现给地图打点等操作。

<template>
    <BMap
        ak="你的百度ak密钥"
        class="map"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        @ready="bMapLoad"
    >
    </BMap>
</template>
 
<script>
  import BMap from 'vue-baidu-map/components/map/Map'
 
  let mapConstructor; // 百度地图构造函数存放容器
 
  export default {
    name: 'map',
    props: {},
    data() {
      return {
        mapPoint,
        center: {
          lng: 116.404,
          lat: 39.915
        },
        zoom: 15,
        map: null, // 地图容器
        BMap: null, // 构造器容器
      }
    },
    components: {
      BMap
    },
    methods: {
      // BMap加载触发实例化方法
      bMapLoad({BMap, map}) {
        // 百度地图容器全局化
        this.map = map;
        // 百度地图构造函数全局化
        mapConstructor = BMap;
        this.BMap = BMap;
        this.bMapPoint();
      },
 
      // 在百度地图上打点方法
      bMapPoint() {
        // 清除地图上的覆盖物
        this.map.clearOverlays();
        const mPoint = new mapConstructor.Point(this.center.lng, this.center.lat);
        var marker = new mapConstructor.Marker(mPoint);
        this.map.addOverlay(marker);
      }
    },
  }
</script>
 
<style scoped lang="scss">
    .map {
      width: 100%;
      height: 45vh;
    }
</style>

编写百度地图组件

在父组件中引入自定义百度地图组件

<template>
  <div class='baiduMapPageCon'>
    <BaiduMapPage ref="baiduMapPage" :markerArr="markerArr"></BaiduMapPage>
  </div>
</template>
<script>
import BaiduMapPage from '@/components/BaiduMapPage/index.vue'
export default {
  name:'baiduMapPageCon',
  components: {BaiduMapPage},
  props:[],
  data() {
    return {
      markerArr:[
       	{ title: "苏州有限公司",lng:113.264531,lat:23.157003,point: "113.264531|23.157003",address: "工业园区",tel:"10086",contact: "陈先生", color: "red"},
        { title: "南京有限公司",lng:113.330934,lat:23.113401,point: "113.330934|23.113401",address: "相城区",tel:"12306",contact: "陈先生", color: "green"},
        { title: "上海有限公司",lng:113.310854,lat:23.113605,point: "113.310854|23.113605",address: "外滩",tel:"0521846555",contact: "陈先生", color: "gray"}
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>

百度地图组件代码：

<template>
  <div class=''>
    <div>
      <BMap
        ak="你的百度ak密钥"
        class="map"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        @ready="bMapLoad"
      ></BMap>
    </div>
  </div>
</template>
<script>
import BMap from 'vue-baidu-map/components/map/Map'
let mapConstructor; // 百度地图构造函数存放容器
export default {
  name:'',
  components: {BMap},
  props:{
    markerArr: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      center: {
        lng: 113.312213,
        lat: 23.147267
      },
      zoom: 13,
      map: null, // 地图容器
      BMap: null, // 构造器容器
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // BMap加载触发实例化方法
    bMapLoad({BMap, map}) {
      // 百度地图容器全局化
      this.map = map;
      // 百度地图构造函数全局化
      mapConstructor = BMap;
      this.BMap = BMap;
      this.initMap()
    },
    initMap(){
      this.addMapControl();//向地图添加控件
      this.bMapPoint();//向地图中添加marker
    },

    //向地图添加控件
    addMapControl(){
      //向地图中添加缩放控件
      var ctrl_nav = new mapConstructor.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      this.map.addControl(ctrl_nav);
      //向地图中添加缩略图控件
      var ctrl_ove = new mapConstructor.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      this.map.addControl(ctrl_ove);
      //向地图中添加比例尺控件
      var ctrl_sca = new mapConstructor.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      this.map.addControl(ctrl_sca);
    },
    // 在百度地图上打点方法
    bMapPoint() {
      // 清除地图上的覆盖物
      this.map.clearOverlays();
      this.markerArr.forEach((item)=>{
        const mPoint = new mapConstructor.Point(item.lng,item.lat);
        var marker = new mapConstructor.Marker(mPoint);
        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //给标点处增加动态效果

        var label = new mapConstructor.Label(item.title,{offset: new mapConstructor.Size(20,-10)});
        // 设置 label 样式
        label.setStyle({
          padding: "3px 10px",
          backgroundColor: item.color,
          color: "#fff",
          borderColor: item.color,
        });
        marker.setLabel(label);

        var info = new mapConstructor.InfoWindow("<p style='font-size:12px;line-height:1.8em;'" + item.title + "</br>地址：" + item.address + "</br> 电话：" + item.tel + "</br> 联系人：" + item.contact+"</p>");//悬浮提示信息

        marker.addEventListener("mouseover",function(){
          this.openInfoWindow(info);//悬浮监听提示方法
        });

        this.map.addOverlay(marker);
      })
    },
  }
};
</script>
<style lang='scss' scoped>
.map {
  width: 100%;
  height: 45vh;
}
</style>