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>

效果如图:

相关推荐
尚学教辅学习资料6 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2346 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq229511650215 小时前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165021 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165021 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴1 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
小远yyds1 天前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
qq22951165022 天前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app
重生之我是菜鸡程序员2 天前
uniapp 使用vue/pwa
javascript·vue.js·uni-app
qq22951165022 天前
asp.net+uniapp养老助餐管理系统 微信小程序
微信小程序·uni-app·asp.net