百度地图再vue中的引入方式

使用方式一

1.在public->index.html引入

<script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak&callback=initBMap"></script>

ak=自己的密钥

2.若是vue2.0就是lib/webpack.base.conf.js加入以下代码，若是vue3.0就在最外层创建一个这个文件

module.exports = {
//百度地图配置
	externals: {
		BMap: "BMap"
	}
};

3.在vue文件 mounted挂载

<div id="map" ref="map"></div>

   mounted() {
		// const _this = this;
		var map = new window.BMap.Map("map");
		map.centerAndZoom(new window.BMap.Point(121.450474, 31.194434), 20); // 初始化地图,设置中心点坐标和地图级别
		//添加地图类型控件
		map.addControl(
		new window.BMap.MapTypeControl({
			mapTypes: [window.BMAP_NORMAL_MAP, window.BMAP_HYBRID_MAP]
		})
		);
		map.setCurrentCity("上海"); // 设置地图显示的城市 此项是必须设置的
		map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
		var point = new window.BMap.Point(121.450474, 31.194434, 15);
		var marker = new window.BMap.Marker(point); // 创建标注
		map.addOverlay(marker); // 将标注添加到地图中
		//点击标注
		marker.addEventListener(
		"click",
		 () => {
		 	 console.log('点击');
			}, true 
		);
}

去除地图logo

<style type="text/css">
	.BMap_cpyCtrl {
	display: none;
	}
	.BMap_noprint {
	display: none;
}
</style>
<style type="text/css">
	.anchorBL {
	display: none;
	}
</style>

使用方式二

**
1.安装百度地图JavaScript API SDK

npm install vue-baidu-map --save

2.在main.js文件中引入百度地图组件并注册它：

import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';

Vue.use(BaiduMap, {
  ak: '你的百度地图API密钥'
});

3.在Vue组件中使用百度地图。例如，在一个名为Map.vue的组件中，可以添加如下代码

<template>
  <div>
    <baidu-map class="map" :ak="ak" @ready="handleMapReady" :center="mapCenter" :zoom="zoom">
      <bm-marker :position="markerPosition"></bm-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: 'Map',
  data() {
    return {
      ak: '你的百度地图API密钥',
      mapCenter: { lng: 116.404, lat: 39.915 },
      zoom: 15,
      markerPosition: { lng: 116.404, lat: 39.915 }
    };
  },
  methods: {
    handleMapReady(map) {
      // 地图加载完成后的回调函数
      console.log('地图加载完成', map);
    }
  }
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}
</style>