微信小程序 地图map组件 SDK 并 实现导航

说明

本文使用uniapp使用map组件作为示例

效果预览

主要实现：

1. 地图上搜索关键字地址
2. 对地址设置标记点
3. 位置授权被拒后，重新触发授权的处理逻辑
4. 实现获取当前位置，计算目标地址与当前位置的距离
5. 触发对选中的信息展示弹窗
6. 实现开始导航操作

需要源码私我

第一步：使用map组件

<template>
	<view class="container">
		<map id="map"></map>
	</view>
</template>

第二步：定义样式

<style>
.container {
   
	width: 100%;
	height: 100vh;
}
#map {
   
	width: 100%;
	height: 100%;
}
</style>

效果如下：

第三步：组件基础属性配置

• template

<map id="map" 
		:longitude="mapConfig.longitude" 
		:latitude="mapConfig.latitude" 
		:scale="mapConfig.scale"
	></map>

• javascript

mapConfig: {
   
			longitude: 113.53909, // 中心经度
			latitude: 22.240989, // 中心纬度
			scale: 15, // 缩放级别，取值范围为3-20
		}

效果如下，更多属性请参考：
https://developers.weixin.qq.com/miniprogram/dev/component/map.html

第四步：标记点配置

• template

    <map id="map" 
		:longitude="mapConfig.longitude" 
		:latitude