一.地图选择
通过uniapp官网提供的地图组件相关介绍，可以看到针对各个平台不同地图的支持程度，因为开发的项目是Android软件，所以综合以上选择使用高德地图进行开发。
二.高德地图使用
1.申请key
先去高德官网申请key（首页 | 高德控制台 (amap.com))
这里我是为项目申请了两个key，绑定服务分别是Android平台和web服务，Android平台主要用于uniapp的manifest.json处绑定地图使用，web服务用于经纬度解析，这里可根据需求申请。注意申请key时填入的SHA1码与包名需要与app最终打包使用的证书、包名一致，否则会导致项目打包后地图功能无法使用。
2.uniapp中配置地图key。
根据自己使用的地图配置相应的key，ios平台如果没有开发需求，可与Android填写一致或随意填入一个值，如果都有开发需求，需要申请不同的key填入。
三.地图展示
1.地图展示
效果图展示：
<map id="map" style="width: 100%; height:100%;"
:latitude="latitude" :longitude="longitude"
:markers="markers" scale="16"
:show-compass='true'
:circles="circles"
:controls="controls"
show-location>
</map>// 展示地图
let arr = [{
id: 0,
longitude: this.longitude,
latitude: this.latitude,
name: "所在位置"
}]
let markers = []
for (var i = 0; i < arr.length; i++) {
markers = markers.concat({
id: arr[i].id,
latitude: arr[i].latitude, //纬度
longitude: arr[i].longitude, //经度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: arr[i].name, //文本
color: '#ffaa00', //文字颜色
fontSize: 18, //文本大小
borderRadius: 8, //边框圆角
bgColor: '#00c16f', //背景颜色
display: 'ALWAYS', //常显
},
label: { //标签备注
content: '',
bgColor: 'red'
},
iconPath: '/static/dingwei.png', // 显示的图标
width: 50,
height: 50,
position: { //控件位置
left: 0,
top: 0,
width: 0,
height: 0
}
})
}
this.markers = markers; // markers就是地图选点一样的功能,显示小坐标
// 地图上显示所在图标结束
this.controls = [{
id: 1,
position: { //控件在地图的位置
left: 15,
top: 15,
width: 10,
height: 10
},
iconPath: '/static/定位.png'
}]
console.log(this.circles)
this.circles = [{ //在地图上显示圆
latitude: this.latitude,
longitude: this.longitude,
fillColor: "#3BBAFD29", //填充颜色（透明度）
color: "#3BBAFD", //描边的颜色
radius: 160, //半径
strokeWidth: 2 //描边的宽度
},
{ //在地图上显示圆
latitude: 36.647,
longitude: 114.550,
fillColor: "#3BBAFD29", //填充颜色
color: "#3BBAFD", //描边的颜色
radius: 100, //半径
strokeWidth: 2 //描边的宽度
},
]2：默认位置展示
地图初始时展示用户所在的位置，这里使用uniapp官网中获取地理位置的方法(uni.getLocation)，可以获取到所在位置的经纬度。使用高德逆向地理编码把经纬度转化成用户默认所在位置展示在输入框。
getAddress() {
const that = this
uni.request({
url: 'https://restapi.amap.com/v3/geocode/regeo',
method: 'GET',
data: {
location: this.longitude + ',' + this.latitude,
key: '6f0bdc094c8980af9171b369b919ea21'
},
success(res) {
if (res.data.regeocode.formatted_address) {
if (that.isadd == 1) {
that.form.address = res.data.regeocode.formatted_address
}
}
}
})
},3：地图根据输入地址显示
地理编码与逆地理编码-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API (amap.com)
把用户输入的位置进行正向地理编码，获取到经纬度，在地图展示（这里使用的key是web服务）
getOtherAddress() {
const that2 = this
uni.request({
url: 'https://restapi.amap.com/v3/geocode/geo',
method: 'GET',
data: {
address: this.form.address,
key: '6f0bdc094c8980af9171b369b919ea21'
},
success(res) {
if (res.data.geocodes) {
const location = res.data.geocodes[0].location.split(',')
that2.longitude = location[0]
that2.latitude = location[1]
console.log(that2.longitude)
}
}
})
},4：增加了打开地图和回到原点功能
让用户使用地图更加方便。打开地图主要是利用用户手机上面的第三方软件，如果没有相关软件，会申请下载。
openMap() {
//点击打开第三方地图APP
// #ifdef APP
this.openNavigation(this.longitude, this.latitude, this.form.address)
//高德地图
// #endif
},
//打开地图
// 导航 会打开导航菜单供用户选择
openNavigation(longitude, latitude, name) {
let url = ""; // app url
let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
let qqmapkey = "ZOYBZ-DO4W7-ATZX2-HS2ZK-UBSCO-JFFBX"
plus.nativeUI.actionSheet({ //选择菜单
title: "选择地图应用",
cancel: "取消",
buttons: [{
title: "高德地图"
}, {
title: "百度地图"
}, {
title: "腾讯地图"
}] // 可选的地图类型
}, (e) => {
// 判断用户选择的地图
switch (e.index) {
//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
case 1: //打开高德地图
if (plus.os.name == "Android") { // 安卓
url =
`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
} else { //苹果
url =
`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
}
webUrl =
`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
break;
case 2: //打开百度地图
if (plus.os.name == "Android") { // 安卓
url =
`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=andr.baidu.openAPIdemo&coord_type=gcj02`;
} else { //苹果
url =
`iosamap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
}
webUrl =
`http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${name}&content=${name}&output=html&src=webapp.baidu.openAPIdemo`
break;
case 3: //打开腾讯地图
if (plus.os.name == "Android") { // 安卓
url =
`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${qqmapkey}`
} else { //苹果
url =
`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${qqmapkey}`;
}
webUrl =
`https://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude}&title=${name}&addr=${name}&referer=${qqmapkey}`
break;
}
// 如果选中
if (url != "") {
url = encodeURI(url);
// console.log(url, '地址')
// 打开 app 导航
plus.runtime.openURL(url, (err) => { // 失败回到
// 毕竟用户可能没有安装app但一定安装的有浏览器
// 如果失败则说明未安装 直接 打开网页版进行导航
let chooseMap = ''
if (e.index == 1) {
chooseMap = "高德地图"
} else if (e.index == 2) {
chooseMap = "百度地图"
} else {
chooseMap = "腾讯地图"
}
uni.showModal({
title: '提示',
content: '检测到您本机暂未安装' + chooseMap + '应用，是否要选择使用浏览器打开？',
confirmText: '确定', //确定文本的文字
cancelText: '取消', //确定文本的文字
showCancel: true, //没有取消按钮的弹框
success: function(res) {
if (res.confirm) {
plus.runtime.openURL(webUrl)
console.log('用户点击了确定')
} else if (res.cancel) {
console.log('用户点击了取消')
// plus.nativeUI.alert("本机未安装指定的地图应用");
}
}
})
});
}
})
},到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注~💕
扫一扫
4349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
