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

使用方式一

1.在public->index.html引入

javascript 复制代码
<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就在最外层创建一个这个文件

javascript 复制代码
module.exports = {
//百度地图配置
	externals: {
		BMap: "BMap"
	}
};

3.在vue文件 mounted挂载

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

javascript 复制代码
   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

html 复制代码
<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

html 复制代码
npm install vue-baidu-map --save

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

javascript 复制代码
import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';

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

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

javascript 复制代码
<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>
相关推荐
Simon_He3 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊38 分钟前
React Ref使用
前端·javascript·react.js
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军1 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子1 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游1 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能
markyankee1011 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
中微子1 小时前
智能前端实践之 shot-word demo
前端
归于尽1 小时前
智能前端小魔术,让图片开口说单词
前端·react.js