Vue - 百度地图展示(vue-baidu-map)

demo 地址: https://github.com/iotjin/jh-vue-demo

vue-baidu-map 文档
vue-baidu-map GitHub

Vue3.0中引入地图（谷歌+高德+腾讯+百度）
vue cli3 百度地图定位

效果图

效果图

1、先在百度开放平台创建应用

在这里插入图片描述

2、项目安装 vue-baidu-map

$ npm install vue-baidu-map --save

3、在main.js中全局引入

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '在此输入你自己的百度地图ak'
})

4、页面实现

<template>
  <div>
    <div>百度地图</div>

    <baidu-map class="map-view" :center="markerPoint" :zoom="16">
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
        @locationSuccess="locationSuccess"
      ></bm-geolocation>

      <bm-marker
        :position="markerPoint"
        :dragging="true"
        @click="infoWindowOpen"
      >
        <bm-info-window
          :show="show"
          @close="infoWindowClose"
          @open="infoWindowOpen"
          style="font-size: 13px"
        >
          北京xxxx <br /><br />
          地址：北京市
        </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      markerPoint: { lng: 116.4, lat: 39.9 },
      show: false,
    };
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 17;
    },

    infoWindowClose() {
      this.show = false;
    },

    infoWindowOpen() {
      this.show = true;
    },

    locationSuccess(point, AddressComponent, marker) {
      console.log("定位成功");
      console.log(point);
      console.log(AddressComponent);
      console.log(marker);
    },
  },
};
</script>

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