vue-cli创建的项目中使用百度地图

vue-cli创建的项目中使用百度地图

记录下，vue-cli创建的vue项目中使用百度地图

一开始我尝试了很多的方法，比如说直接在index.html上加上使用百度地图api的外链，然后查到的相关博文指导说的是在webpack.config.js文件中加上bmap。但是我是使用的vue-cli的图形化界面直接创建的vue项目，这个文件被隐藏了，不过可以自己新建一个vue.config.js文件，加上bmap。但是我是使用的chainWebpack，我在externals里面写了，并没有用。后面也没有过多尝试。

然后，发现可以安装 vue-baidu-map依赖，一样使用。

可以使用

npm install vue-baidu-map --save

我是使用脚手架搭建的项目，直接在图形化界面的依赖中搜索下载即可

装好包之后，在项目中import

全局注册是

入口is中import

import BaiduMap from 'vue-baidu-map'

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

然后可以使用baidu-map等各种组件了

<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>

我自己是使用了全局注册

实现了，打开网页的时候，获取定位展示地图

<template>
    <baidu-map class="map" :center="center" :zoom="zoom" @ready="initMap"  :map-click="false" :double-click-zoom="false" :scroll-wheel-zoom="true" :mapStyle="mapStyle" >
       <!--自动定位-->
	   <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true" @locationSuccess="getLoctionSuccess" @locationError="getLocationError">
	   </bm-geolocation>
	</baidu-map>
</template>

<script>
// import { BaiduMap, BmScale, BmGeolocation } from 'vue-baidu-map'
export default {
  data() {
    return {
      autoLocationPoint: {lng: 0, lat: 0},
      initLocation: false,
      center: '',
      zoom: 12,
      mapStyle:{
            features: ["road","building","water","land"],//隐藏地图上的"poi",
            style : "midnight",
        }
    }
  },
  methods: {
      initMap ({BMap, map}) {
        map.addControl(new BMap.MapTypeControl({
          mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ],
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        }));
        var top_left_navigation = new BMap.NavigationControl();
        map.addControl(top_left_navigation);
        let _this = this;	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
        
        //使用浏览器定位
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          console.log(r);
          _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
          _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
          _this.initLocation = true;	
          console.log('center:', _this.center)	// 如果这里直接使用this是不行的
        },{enableHighAccuracy: true})
      },
  },
  components: {

  }
}
</script>

<style lang='less' scoped>
.map{
  width: 100%;
  height: 100%;
  margin: 0px !important;
}
</style>

,
}