uniapp 微信小程序端使用百度地图API

卿本无忧2024-06-30 8:32

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

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

3、选择"创建应用"，应用模块选择"微信小程序"。创建成功后你就得到一个百度地图AK。

4、下载百度地图微信小程序JavaScript API

下载地址：微信小程序JavaScript API - 配置环境 | 百度地图API SDK

下载百度地图微信小程序JavaScript API，解压后的文件中有 bmap-wx.js 文件(压缩版 bmap-wx.min.js )，将其拷贝到新建的路径下，安装完成。如下图所示，新建路径 "libs" ,将 bmap-wx.js 文件拷贝至 "libs" 路径下。

如下图：

5、设置请求合法域名

登录微信公众平台--"开发"--"开发管理"--"服务器域名"--"request合法域名"

添加 https://api.map.baidu.com

PS：设置成功之后，微信开发者工具 "刷新项目"，同步合法域名设置

如下图：

正式开写，显示地图，并给地图添加标记点，给点标记添加点击事件

html 复制代码

<template>
	<view class="map-container">
		<map class="map" id="map" :longitude="longitude" :latitude="latitude" scale="14" :show-location="true"
			:markers="markers" @markertap="makertap">
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: "39.915",
				longitude: "116.404",
				markers: [{
					latitude: 39.909,
					longitude: 116.39742,
				}, {
					latitude: 39.90,
					longitude: 116.39,
				}]
			}
		},
		mounted() {
			// 引入百度地图API
			const bmap = require('../../libs/bmap-wx.min.js');
			const BMapWX = bmap.BMapWX;
			var BMap = new BMapWX({
				ak: '你的AK',
			});
			// 调用百度地图API进行逆地址解析（从经纬度转换为地址信息）
			BMap.regeocoding({
				location: this.latitude + "," + this.longitude, //这里传的是经纬度
				fail: resp => {
					console.log(resp, '失败');
				},
				success: resp => {
					console.log(resp, '成功');
				},
			});
		},
		methods: {
			makertap() {
				console.log("这是标记点的点击事件");
			}
		},
	};
</script>

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