uniapp H5端使用百度地图

1、登录百度地图开放平台 https://lbsyun.baidu.com/(没有账号则先去创建一个百度账号)

2、进入百度地图开放平台控制台(导航栏"控制台"),点击"应用管理"-"我的应用"

3、选择"创建应用",应用模块选择"浏览器端"。创建成功后你就得到一个百度地图AK。

4、接下来就可以开始使用了

首先在index.html页面引入百度地图API

html 复制代码
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=你的AK"></script>

正式开写,显示地图,并给地图添加标记点,点击标记点显示地址信息

html 复制代码
<template>
	<div id='container'></div>
</template>

<script>
	export default {
		data() {
			return {
				// 标记点列表
				markerList: [{
					id: 1,
					longitude: 116.404,
					latitude: 39.915,
					title: "天安门",
					address: "北京市天安门广场"
				}, {
					id: 2,
					longitude: 116.404,
					latitude: 39.925,
					title: "故宫博物馆",
					address: "北京市故宫博物馆"
				}];
			}
		},

		mounted() {
			this.initMap();
		},

		methods: {
			initMap() {
				var map = new BMapGL.Map("container"); // 创建地图实例
				var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
				map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
				map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
				map.setHeading(64.5); //设置地图旋转角度
				map.setTilt(73); //设置地图的倾斜角度

				// 创建点标记图标
				var markerIcon = new BMapGL.Icon("icon.png", new BMapGL.Size(23, 26));
				// 批量添加点标记
				this.markerList.forEach(item => {
					var markerPoint = new BMapGL.Point(item.longitude, item.latitude);
					var marker = new BMapGL.Marker(markerPoint, {
						icon: markerIcon
					});
					map.addOverlay(marker);

					// 创建信息窗口
					var opts = {
						width: 200,
						height: 60,
						title: item.title
					};
					var infoWindow = new BMapGL.InfoWindow('地址:' + item.address, opts);
					// 点标记添加点击事件
					marker.addEventListener('click', function() {
						// 开启信息窗口
						map.openInfoWindow(infoWindow, markerPoint);
					});
				})
			},
		},
	};
</script>

<style scoped>
	#container {
		width: 100%;
		height: 500px;// 高度一定要给
	}
</style>

效果如图:

相关推荐
耶啵奶膘4 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o11 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index11 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情19 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑00721 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字21 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔1 天前
uniapp rpx兼容平板
uni-app
荔枝吖1 天前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗1 天前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo14161 天前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app