unipp app端使用地图进行定位、打点、导航、路线规划
uniapp地图导航、定位、打点、路线规划
·
1.渲染地图(html部分)
<template>
<view>
<map
id="test_map"
ref="map1"
style="width: 100%; height: 600px"
:show-location="true"
:longitude="map.longitude"
:latitude="map.latitude"
:markers="markers"
:polyline="polyline"
show-compass="true"
show-location="true"
:controls="controls"
@tap="tapMap"
>
</map>
<button @click="dingwei">定位到"北京西站"</button>
<button @click="dingwei2">ref 定位到"北京西站"</button>
<button @click="chooseLocation">选择地点</button>
<button @click="getDriverLine">开始导航</button>
<button @click="openNavigation">打开app</button>
<button @click="openNavigation">规划路线</button>
</view>
</template>
2.数据和方法
<script>
export default {
props: {
getLocation: {
type: Object,
default: null,
},
},
data() {
return {
mapContext: {},
map: {
longitude: "", //经度
latitude: "", //纬度
},
form: {
name: "",
area: "",
address: "",
location: "",
},
runningRoute: "",
polyline: [
{
// 每个点的经纬度
points: [
{
longitude: 118.769025,
latitude: 31.976056,
},
{
longitude: 118.77464,
latitude: 31.974362,
},
{
longitude: 118.774039,
latitude: 31.97631,
},
],
// 颜色
color: "#000",
// 宽度
width: 10,
dottedLine: true,
arrowLine: true,
colorList: true,
},
],
controls: [
// {
// //在地图上显示控件,控件不随着地图移动
// id: 1, //控件id
// iconPath: "/static/c1.png", //显示的图标
// position: {
// //控件在地图的位置
// left: 15,
// top: 15,
// width: 50,
// height: 50,
// },
// },
],
markers: [
// {
// longitude: 118.769032,
// latitude: 31.975258,
// iconPath: "/static/c1.png",
// },
],
};
},
created() {
let _this = this;
if (this.getLocation != null) {
console.log("当前位置", this.getLocation);
_this.map.longitude = this.getLocation.longitude;
_this.map.latitude = this.getLocation.latitude;
_this.getDriverLine();
return;
}
},
mounted() {
this.mapContext = uni.createMapContext("test_map", this);
//起点
// this.addMarler();
// 终点
// this.addEndMarler();
},
methods: {
// 导航 会打开导航菜单供用户选择,都是打开内置地图
openNavigation() {
//方法1
let longitude = xxxxx;
let latitude = xxxxxx;
let name = '想要去的地方'
let url = ""; // app url
let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
plus.nativeUI.actionSheet(
{
//选择菜单
title: "选择地图应用",
cancel: "取消",
buttons: [{ 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;
}
// 如果选中
if (url != "") {
url = encodeURI(url);
// 打开 app 导航
plus.runtime.openURL(url, (err) => {
// 失败回到
// 如果失败则说明未安装 直接 打开网页版进行导航
// 毕竟用户可能没有安装app但一定安装的有浏览器
plus.runtime.openURL(webUrl);
});
}
}
);
//方法2
uni.openLocation({
latitude: 31.975258,
longitude: 118.769032,
name: "想去的地方",
success() {
console.log("success");
},
});
},
//路线规划,调用高德地图的api实现规划路线的功能。
getDriverLine() {
const that = this;
//这个key是在高德导航app上申请的web路线规划
const key = "";
//起点坐标
const origin = "xxx,xxx";
//给起点坐标一个图标
this.startingPoint()
//给终点坐标一个图标
this.endPoint()
//终点坐标
const destination = "xxx,xxx";
uni.request({
url: `https://restapi.amap.com/v3/direction/driving?origin=${origin}&destination=${destination}&key=${key}`,
success: (res) => {
console.log(res);
const data = res.data.route;
var points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
for (var i = 0; i < steps.length; i++) {
//将每一步的数据放到points数组中
var poLen = steps[i].polyline.split(";");
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(",")[0]),
latitude: parseFloat(poLen[j].split(",")[1]),
});
}
}
console.log(data.paths[0].steps[0].instruction)
//这个是我用来测试的,指的是开始导航之后的要走的第一步路
that.runningRoute = data.paths[0].steps[0].instruction;
console.log('行驶路线-----------',that.runningRoute)
}
//这个就是走的路,下面有几个属性在app上不支持
that.polyline = [
{
points: points,
color: "#0091ff",
dottedLine: true,
width: 15,
arrowLine: true,
colorList: true,
},
];
},
fail: function (res) {
console.log("获取路线失败", res);
},
});
},
},
// 规划路线的时候给起点一个marker,
startingPoint() {
let point = [
{
id: 1,
width: 40,
height: 40,
latitude: xxxx,
longitude: xxxx,
iconPath: "/static/qidian.png",
anchor: {
x: 0.5,
y: 1,
},
},
];
this.markers = this.markers.concat(point);
},
// 规划路线的时候给终点一个marker,
endPoint() {
let point = [
{
id: 2,
width: 40,
height: 40,
latitude: xxxx,
longitude: xxxx,
iconPath: "/static/zhongdian.png",
anchor: {
x: 0.5,
y: 1,
},
},
];
this.markers = this.markers.concat(point);
daohang() {
uni.openLocation({
longitude: parseFloat(118.769025),
latitude: parseFloat(31.976056),
scale: 18,
success: function () {
console.log("success");
},
});
},
//点击之后打点的功能
tapMap(e) {
var that = this;
var id = e.currentTarget.id;
var maps = uni.createMapContext("test_map", this).$getAppMap();
maps.onclick = function (point) {
console.log(point);
point.iconPath = "/static/c1.png";
that.markers = that.markers.concat(point);
uni.showToast({
title: "添加成功",
icon: "none",
});
};
},
//定位当前位置方法1
dingwei() {
this.mapContext.moveToLocation({
//该固定坐标为高德地图拾取,位置:北京西站
latitude: 39.894589,
longitude: 116.32125,
success: function (res) {
console.log("此处无回调!!!本条信息未在控制台打印");
console.log(res);
},
});
},
//定位当前位置方法2
dingwei2() {
console.log(this.$refs.map1);
this.$refs.map1.moveToLocation(
{
//该固定坐标为高德地图拾取,位置:北京西站
latitude: 39.894589,
longitude: 116.32125,
},
function (res) {
console.log("此处无回调!!!本条信息未在控制台打印");
console.log(res);
}
);
},
//自带选址(这个我没用到)
chooseLocation() {
uni.chooseLocation({
success: (res) => {
console.log(res);
this.form.name = res.name;
this.form.area = res.address;
this.form.location = this.util.formatLocation(
res.longitude,
res.latitude
);
this.setMap(res);
},
});
},
setMap(res) {
this.longitude = res.longitude;
this.latitude = res.latitude;
this.markers[0].longitude = res.longitude;
this.markers[0].latitude = res.latitude;
}
},
};
</script>
更多推荐
所有评论(0)