百度地图再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>
相关推荐
BillKu4 分钟前
Vue3 Element Plus 对话框加载实现
javascript·vue.js·elementui
郝YH是人间理想35 分钟前
系统架构设计师案例分析题——web篇
前端·软件工程
Evaporator Core36 分钟前
深入探索:Core Web Vitals 进阶优化与新兴指标
前端·windows
初遇你时动了情1 小时前
html js 原生实现web组件、web公共组件、template模版插槽
前端·javascript·html
QQ2740287561 小时前
Soundness Gitpod 部署教程
linux·运维·服务器·前端·chrome·web3
前端小崔2 小时前
从零开始学习three.js(18):一文详解three.js中的着色器Shader
前端·javascript·学习·3d·webgl·数据可视化·着色器
哎呦你好2 小时前
HTML 表格与div深度解析区别及常见误区
前端·html
运维@小兵2 小时前
vue配置子路由,实现点击左侧菜单,内容区域显示不同的内容
前端·javascript·vue.js
koiy.cc2 小时前
记录:echarts实现tooltip的某个数据常显和恢复
前端·echarts
一只专注api接口开发的技术猿3 小时前
企业级电商数据对接:1688 商品详情 API 接口开发与优化实践
大数据·前端·爬虫