实现效果展示:
地图底图使用的是腾讯地图,实现步骤:
一、在腾讯地图申请密钥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>