H5 高德、百度、腾讯地图选择导航功能实现_h5地图导航制作

作者：小丑西瓜9 | 2024-03-23 21:03:32

踩

h5地图导航制作

实现效果展示：

地图底图使用的是腾讯地图，实现步骤：

一、在腾讯地图申请密钥key值；申请地址：https://lbs.qq.com/dev/console/application/mine (有账号直接登录，无账号注册后登录)。

1、点击【应用管理】按钮；

2、点击【提交key】按钮；

3、设置相关信息，点击添加按钮，即可生成key。

二、在h5入口页index.html头部中引入腾讯地图，

<script src="https://map.qq.com/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 (amap.com)

location.href = `https://uri.amap.com/navigation?from=${this.mylng},${this.mylat},${"我的位置"}&to=${this.navlng},${this.navlat},${this.dlmc}&callnative=1`;

2、百度地图：百度地图-导航

location.href =`http://api.map.baidu.com/marker?location=${this.navlat},${this.navlng}&title=${this.dlmc}&content=${this.navAddress}&output=html&src=webapp.baidu.openAPIdemo`;

3、腾讯地图：腾讯地图-路线规划

location.href =`https://apis.map.qq.com/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.map.qq.com/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){
		//创建并初始化MultiMarker
		let 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 = `https://uri.amap.com/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.map.baidu.com/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.map.qq.com/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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/297676