在Vue项目种引入百度地图

http://lbsyun.baidu.com/ 这是申请访问应用（ak）的网站，就是百度地图的开放平台,需要先注册加入百度开发者。

进入 JavaScript API

点击账号和获取密钥，后面有详细步骤，大家应该都有百度账号，然后申请成为百度开发者，

这里正常填写

会给你发送邮件在邮件里激活一下直接点击跳转页面。

正常填写，最底下白名单填一个 * 即可。

成功后在控制台可以看到自己的AK。

剩下的就是代码端的操作了

安装百度地图的插件（项目路径cmd）。

npm install vue-baidu-map

在自己的main.js文件里加上以下内容, AK码填写自己的.

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {

ak: 'GpR5245ss5********RRRRVl9'

});

在页面加入以下代码即可

< template >

     < div >

         < baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">

             

             < bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></ bm-navigation >

             

             < bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></ bm-geolocation >

             

             < bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP">

                 

                 < bm-info-window :show="map.show">Hello~</ bm-info-window >

             </ bm-marker >

         </ baidu-map >

     </ div >

</ template >

< script >

     export default {

         name: "demo",

         data: () => ({

             map:{

                 center: {lng: 121.4472540000, lat: 31.3236200000},

                 zoom: 15,

                 show: true,

                 dragging: true

             },

         }),

         methods: {

             handler ({BMap, map}) {

                 let me = this;

                 console.log(BMap, map)

                 // 鼠标缩放

                 map.enableScrollWheelZoom(true);

                 // 点击事件获取经纬度

                 map.addEventListener('click', function (e) {

                     console.log(e.point.lng, e.point.lat)

                 })

             }

         }

     }

</ script >

< style scoped>

     .map {

         width: 100%;

         height: 400px;

     }

</ style >

到这里已经够用了，

以下是进阶操作

将数据传到父组件。

< template >

     < div >

         < a-row :gutter="16">

             < a-col :span="12">

                 < a-form-item v-if="map.isAdd" label="关键词">

                     < a-input v-model="map.keyword"/>

                 </ a-form-item >

             </ a-col >

             < a-col :span="12">

                 < a-form-item v-if="map.isAdd" label="地区">

                     < a-input v-model="map.location"/>

                 </ a-form-item >

             </ a-col >

         </ a-row >

         < baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">

             < bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></ bm-navigation >

             < bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></ bm-geolocation >

             < bm-local-search v-if="map.isAdd" class="search" :keyword="map.keyword" :auto-viewport="true" :location="map.location"></ bm-local-search >

         </ baidu-map >

     </ div >

</ template >

< script >

     export default {

         name: "simple-map",

         props: {

             map: {

                 type: Object

             }

         },

         data: () => ({

         }),

         methods: {

             handler ({BMap, map}) {

                 let me = this;

                 console.log(BMap, map)

                 // 鼠标缩放

                 map.enableScrollWheelZoom(true);

                 // 点击事件获取经纬度

                 map.addEventListener('click', function (e) {

                     console.log(e.point.lng, e.point.lat)

                     me.$emit('select-location', {

                         lng: e.point.lng,

                         lat: e.point.lat

                     });

                 })

             }

         }

     }

</ script >

< style scoped>

     .map {

         width: 100%;

         height: 400px;

     }

     .map .search{

         margin-bottom: 65px;

     }

</ style >

这是父组件

< simple-map :map="mapForAdd" @select-location="selectLocation"></ simple-map >

selectLocation: function (e) {

         // 这里用到了antDesign，不再科普了。实际上就是获取子组件传来的数据

     this.formForAdd.setFieldsValue({

         longitude: e.lng,

         latitude: e.lat,

     })

}

在上面可以直接看到经纬。

来源：oschina

链接：https://my.oschina.net/u/4442945/blog/3212730

标签

vue

地图api