vue nuxt npm 调用百度地图

nuxt 调用百度地图

安装

npm install vue-baidu-map --save

plugins

// nuxt.config.js文件

// ak 需要自己去申请
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{ak:'HQ878aCeCCFD4GPEFvaQOLANZSv8bKKw'})
export default () => {
    Vue.use(BaiduMap)
}

{
	src: "~/plugins/baidu-map",
	ssr: false
},

点击查看ak申请参考

调用

<map :longitude="116.489069" :latitude="39.950344" />

组件代码

<template>
<div>
    <baidu-map id="allmap" @ready="mapReady" :scroll-wheel-zoom="true"></baidu-map>
</div>
</template>

<script>
export default {
	props:{
		// 经度
		longitude: {
			type:Number,
            require:true
		},
		// 纬度
		latitude: {
			type:Number,
            require:true
		},
	},
    data() {
        return {
            point: "",
            position: {
				Name: 'xxx科技有限公司',
				address: '北京市朝阳区',
				phoneNumber: '+86-10-6213 4567',
            }
        }
    },
    methods: {
        mapReady({
            BMap,
            map
        }) {
            // 选择一个经纬度作为中心点
			this.point = new BMap.Point(this.longitude,this.latitude);
            map.centerAndZoom(this.point, 18);
            var sContent =
				'<div style="width:280px;"><p style="font-size:16px;font-weight:bold;margin-top: 10px;color:#D07852">' +
				this.position.Name +
				'</p><p style="font-size:13px;margin: 5px 0;">地址：' +
				this.position.address +
				'</p><p style="font-size:13px;margin: 5px 0;">电话：' +
				this.position.phoneNumber +
				'</p><p style="font-size:13px;margin: 5px 0;">坐标：' +
				this.longitude +
				',' +
				this.latitude;
			('</div>');
			var point = new BMap.Point(this.longitude, this.latitude); // 创建点坐标
			var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            // //点击图标时候调用信息窗口
			var infoWindow = new BMap.InfoWindow(sContent);
			marker.addEventListener('click', function() {
				this.openInfoWindow(infoWindow);
			});
        },
    }
}
</script>

<style lang="scss">
/* 设定地图的大小 */
#allmap {
    height: 600px;
    width: 100%;
    margin: 0 auto;
}
</style>

获取百度地图经纬度

获取百度地图经纬度

问题举例

原因及解决
自己写的名字刚好和官网的名字重复了