怎么使用uniapp创建百度地图

首先,了解uniapp环境下使用百度地图需要使用BaiduMap-SDK插件.

1.开始之前,您需要下载并安装BaiduMap-SDK插件,通过点击菜单栏的"插件"选项或在命令行运行"npm install BaiduMap-SDK"
2.在你想使用百度地图的页面中引用该插件，示例代码如下：

	<script>
		import BaiduMap from '@/uni_modules/BaiduMap-SDK/js/BaiduMap.min.js'//引入百度地图的SDK
		export default {
			onReady() {//uni页面的生命周期方法
				BaiduMap.initMap('map', '百度地图AK');//初始化地图,第一个参数是地图容器，第二个参数是百度地图的API key
			}
		}
	</script>

	<template>
		<view>
			<view id='map' style='width:100%;height:600rpx'></view> //地图容器
		</view>
	</template>

其次,创建地图标注,Marker覆盖物,通过指定一个位置在地图上描绘出标记点.

示例代码如下:

	<template>
		<view>
			<view id='map' style='width:100%;height:600rpx'></view> //地图容器
		</view>
	</template>

	<script>
		import BaiduMap from '@/uni_modules/BaiduMap-SDK/js/BaiduMap.min.js'//引入百度地图的SDK

		export default {
			onReady() {
				BaiduMap.initMap('map', '百度地图AK');//初始化地图
				this.addMarker();//调用添加标记点的方法
			},
			methods: {
				addMarker() {
					const marker = new BMap.Marker(new BMap.Point(116.404, 39.915));//创建一个位置在(116.404, 39.915)的新标记点
					BaiduMap.map.addOverlay(marker);//将标记点添加到地图上
				}
			}
		}
	</script>

接下来,实现地图定位功能,定位到用户当前的位置.

示例代码如下:

	<template>
		<view>
			<view id='map' style='width:100%;height:600rpx'></view> //地图容器
			<button @tap='getCurrentLocation'>获取当前位置</button> //按钮
		</view>
	</template>

	<script>
		import BaiduMap from '@/uni_modules/BaiduMap-SDK/js/BaiduMap.min.js'//引入百度地图的SDK

		export default {
			onReady() {
				BaiduMap.initMap('map', '百度地图AK');//初始化地图
				this.getCurrentLocation();//调用获取当前位置的方法
			},
			methods: {
				getCurrentLocation() {
					const geolocation = new BMap.Geolocation();//实例化BMap.Geolocation类
					geolocation.getCurrentPosition((result) => {//调用getCurrentPosition方法,获取定位信息
						if (geolocation.getStatus() == BMAP_STATUS_SUCCESS) {//如果定位成功
							BaiduMap.map.panTo(result.point);//地图移动到用户当前位置
						} else {//如果定位失败
							alert('定位失败');
						}
					});
				}
			}
		}
	</script>

最后，展示一个完善的示例程序，实现了地图创建、地图标注、地图定位等多种功能.

	<template>
		<view>
			<view id='map' style='width:100%;height:600rpx'></view> //地图容器
			<button @tap='addMarker'>添加标记点</button> //添加标记点按钮
			<button @tap='getCurrentLocation'>获取当前位置</button> //获取当前位置按钮
		</view>
	</template>

	<script>
		import BaiduMap from '@/uni_modules/BaiduMap-SDK/js/BaiduMap.min.js'//引入百度地图的SDK

		export default {
			onReady() {
				BaiduMap.initMap('map', '百度地图AK');//初始化地图
			},
			methods: {
				addMarker() {
					const point = new BMap.Point(116.404, 39.915);//创建一个位置在(116.404, 39.915)的新标记点
					const marker = new BMap.Marker(point);//实例化一个标记点
					BaiduMap.map.addOverlay(marker);//将此标记添加到地图上
				},
				getCurrentLocation() {
					const geolocation = new BMap.Geolocation();//实例化BMap.Geolocation类
					geolocation.getCurrentPosition((result) => {//调用getCurrentPosition方法,获取定位信息
						if (geolocation.getStatus() == BMAP_STATUS_SUCCESS) {//如果定位成功
							BaiduMap.map.panTo(result.point);//地图移动到用户当前位置
						} else {//如果定位失败
							alert('定位失败');
						}
					});
				}
			}
		}
	</script>