实现效果展示：
地图底图使用的是腾讯地图，实现步骤：
一、在腾讯地图申请密钥key值；申请地址：/dev/console/application/mine (有账号直接登录，无账号注册后登录)。
1、点击【应用管理】按钮；
2、点击【提交key】按钮；
3、设置相关信息，点击添加按钮，即可生成key。
二、在h5入口页index.html头部中引入腾讯地图，
<script src="/api/gljs?v=1.exp&key=申请的key值"></script>
如果在uni-app框架需要在manifest.json ==》h5配置 ==》index.html模板路径 中，设置index。html入口页，如图所示：
在.vue页面获取地图展示，可参考最下面代码模块。
//移除腾讯地图比例尺
this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
//移除腾讯地图旋转控件
this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
//移除腾讯地图缩放控件
this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
三、地图导航选择器实现，可参考最下面代码模块。我这里使用的是uview中的v-popup，仅供参考，选择器可自行选择组件。
导航核心模块：
1、高德地图：高德地图-路线规划 、导航-iOS-开发指南-高德地图手机版 | 高德地图API ()
location.href = `/navigation?from=${this.mylng},${this.mylat},${"我的位置"}&to=${this.navlng},${this.navlat},${this.dlmc}&callnative=1`;
2、百度地图：百度地图-导航
location.href =`http://api./marker?location=${this.navlat},${this.navlng}&title=${this.dlmc}&content=${this.navAddress}&output=html&src=webapp.baidu.openAPIdemo`;
3、腾讯地图：腾讯地图-路线规划
location.href =`https://apis./uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.mylat},${this.mylng}&to=${this.dlmc}&tocoord=${this.navlat},${this.navlng}&policy=1&referer=申请的key值`;
代码展示：仅供参考 需要wgs84togcj02 =》utils.js - 9、坐标转化：wgs84转gcj02
<template><view><view id="container"></view><view class="body"><u-popup :show="coordinateShow" mode="bottom" @close="coordinateShow=false" :overlay='false'><view class="coordinate-body"><!--标记点内容展示--><view class="navigation" @click="openURL"><img class="navigationImage" src="/static/dingwei.png"/><text>位置导航</text></view></u-popup><u-popup :show="!coordinateShow" mode="bottom" @click="coordinateShow=true"><view class="nav_title" @click="goMap('gaode')">高德地图</view><view class="nav_title" @click="goMap('baidu')">百度地图</view><view class="nav_title" @click="goMap('tencent')">腾讯地图</view><view class="nav_title" @click="coordinateShow=true">取消</view></u-popup></view></view></template><script>import { wgs84togcj02 } from '@/static/utils';export default {components: {},data () {return {title: 'map',map:"",mylng:0,mylat:0,navlng:0,navlat:0,bjdmc:"标记点名称",navAddress:"",coordinateShow: true,}},mounted () {this.getDate();},methods: {//获取数据getDate(){let that = this;let lng = that.getQueryString('lng') ? Number(that.getQueryString('lng')) : 118.784093;let lat = that.getQueryString('lat') ? Number(that.getQueryString('lat')) : 32.041695;that.navlng = wgs84togcj02(lng, lat)[0];// wgs84转gcj02 获取精确的经纬度，可换自己的方式获取精确位置。that.navlat = wgs84togcj02(lng, lat)[1];// wgs84转gcj02 获取精确的经纬度that.getLocation();uni.request({url: 'https://apis./ws/geocoder/v1/' + '?location=' + that.navlat + ',' + that.navlng +'&key=' + '申请的key值' + '&get_poi=1',header: {'Content-Type': 'application/json'},data: {},method: 'GET',success: (res) => {that.navAddress = res.data.result.address;//标记点的地理位置}});that.initMap(wgs84togcj02(lng, lat)[1],wgs84togcj02(lng, lat)[0]);},//获取URL后参数getQueryString(name){let query = decodeURIComponent(window.location.href);let rooms = query.split('?');for (let i = 0; i < rooms.length; i++) {let pair = rooms[i].split('=');if (pair[0] == name) {return (pair[1].split('&'))[0]}}//或者拼接&后面的值let vars = query.split('&')for (let i = 0; i < vars.length; i++) {let pair = vars[i].split('=')if (pair[0] == name) {return pair[1]}}},//当前位置定位，我这里使用的是uni.getLocation仅供参考，可换成自己的定位方式。getLocation(){let that = this;uni.getLocation({type: 'gcj02', //返回可以用于uni.openLocation的经纬度success: function (res) {that.mylng = wgs84togcj02(res.longitude, res.latitude)[0];that.mylat = wgs84togcj02(res.longitude, res.latitude)[1];}})},//获取地图initMap(lat,lng) {//定义地图中心点坐标let center = new TMap.LatLng(lat,lng)//定义map变量，调用 TMap.Map() 构造函数创建地图this.map = new TMap.Map('container', {disableDefaultUI: true,center: center,//设置地图中心点坐标zoom: 14.5, //设置地图缩放级别baseMap: { // 设置卫星地图type: 'satellite'}});this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE); //移除比例尺this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); //移除旋转控件this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); //移除缩放控件this.markerLayer(center);},//坐标点markerLayer(center){//创建并初始化MultiMarkerlet markerLayer = new TMap.MultiMarker({map: this.map, //指定地图容器//样式定义styles: {//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）"myStyle": new TMap.MarkerStyle({ "width": 25, // 点标记样式宽度（像素）"height": 35, // 点标记样式高度（像素）"src": '/static/navigation.png', //图片路径//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点"anchor": { x: 12.5, y: 35 } }) },//点标记数据数组 ，可加多个标记点geometries: [{"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id"styleId": 'myStyle', //指定样式id"position": center, //点标记坐标位置"properties": {//自定义属性}}]});},//打开导航方式openURL() {this.coordinateShow = !this.coordinateShow;},goMap(mapApp){//高德地图if(mapApp=="gaode"){location.href = `/navigation?from=${this.mylng},${this.mylat},${"我的位置"}&to=${this.navlng},${this.navlat},${this.bjdmc}&callnative=1`;}//百度地图if(mapApp=="baidu"){let that = this;location.href =`http://api./marker?location=${that.navlat},${that.navlng}&title=${that.bjdmc}&content=${that.navAddress}&output=html&src=webapp.baidu.openAPIdemo`;}//腾讯地图if(mapApp=="tencent"){location.href =`https://apis./uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.mylat},${this.mylng}&to=${this.bjdmc}&tocoord=${this.navlat},${this.navlng}&policy=1&referer=申请的key值`;}},}}</script><style lang="scss" scoped>#container{height: 80vh;}.coordinate-body {}/deep/.uni-input-input {background-color: #fff;}/deep/.u-popup__content{padding: 0 80rpx 0 36rpx;}/deep/.popup-body{display: flex !important;flex-direction: column !important;align-items: center !important;height: 100%;}/deep/.popup-title{font-size: 36rpx;font-weight: bold;margin: 30rpx 0 50rpx 0;}/deep/.maptype-label {margin: 16rpx 0;font-size: 32rpx;font-weight: bold;}.navigation{display: flex;flex-direction: row;align-items: center;justify-content: center;font-size: 26rpx;font-family: Microsoft YaHei;font-weight: 400;color: #fff;background: #539F92;border-radius: 30rpx;margin: 0 60rpx 30rpx 60rpx;padding: 15rpx 24rpx;.navigationImage{width: 40rpx;height: 40rpx;padding-right: 12rpx;}}.nav_title{text-align: center;padding: 24rpx;}</style>
