Vue項目引入百度地圖

先去百度開放平臺申請ak。http://lbsyun.baidu.com/

進來之後

按照步驟走，先登錄百度賬號，然後申請成爲開發者，然後申請ak密鑰

 填寫完畢後提交，會給你郵箱發個激活郵件

點擊申請密鑰

      

 

然後點擊提交

 

 這個時候，你就可以拿着這個ak去使用百度地圖了。

 使用

 執行

npm install vue-baidu-map

　　

 然後再main.js里加上（注意你自己的ak密鑰）

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
    ak: 'GpRqD2Sowifs********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>

　　

 然後其它頁面引入這個組件即可，注：這只是個helloworld哦

 

實際上運用的話，是需要將數據傳遞給父組件的，比如經緯度之類的。比如：

<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,
	})
}

　　

頁面（效果就是點擊地圖上的點，傳遞經緯度）