Diretório de artigos
Visão geral técnica
Descreva o que essa tecnologia faz/em que circunstâncias essa tecnologia será usada, o motivo para aprender essa tecnologia e onde estão as dificuldades da tecnologia. Controle dentro de 50-100 palavras.
A exibição da rota de navegação no componente de mapa do uniapp. É o método de implementação de introdução de navegação no mapa quando o uniapp desenvolve aplicativos. A dificuldade técnica é que, ao implementar o componente do mapa, alguns bugs estranhos tendem a aparecer nos detalhes de atributos e funções.
Detalhes técnicos
Descreva como você implementa e usa a tecnologia, exigindo uma descrição detalhada do código e do fluxograma. Múltiplos pontos podem ser subdivididos para descrever cada parte separadamente.
- A primeira é solicitar uma chave de mapa na plataforma do desenvolvedor de mapas
chave é uma obrigação ao introduzir mapas durante o desenvolvimento do mapa
- Em seguida, instale o plug-in no mercado de plug-ins da ferramenta de desenvolvimento HbuilderX
Encontre este plug-in de planejamento de rotas no mercado de plug-ins, clique para instalá-lo na ferramenta de desenvolvimento.
- Introduzir o arquivo js no script da página
import Amap from '@/js/lyn4ever-gaode.js';
- O arquivo js acima tem duas funções, que são a rota de desenho e a função de marcação de rota
Trace a função de rota planejada
//绘制规划路线
function PlanningRoute(start, end, _waypoints, result, fail) {
let that = this;
var myAmapFun = new amapFile.AMapWX({
key: key
});
myAmapFun.getDrivingRoute({
origin: start,
destination: end,
waypoints: _waypoints,
success: function(data) {
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++) {
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])
})
}
}
}
result({
points: points,
color: "#0606ff",
width: 8
})
},
fail: function(info) {
fail(info)
}
})
}
função de marcador de rota
//标记标记点
function Makemarkers(startpoi, endpoi, waypoints, success) {
let markers = [];
//起点
let start = {
iconPath: "@/static/img/log/nav.png",
id: 0,
longitude: startpoi.split(",")[0],
latitude: startpoi.split(",")[1],
width: 23,
height: 33,
callout:{
content:'起点',
}
}
markers.push(start)
//终点
let end = {
iconPath: "@/static/img/log/nav.png",
id: 1,
longitude: endpoi.split(",")[0],
latitude: endpoi.split(",")[1],
width: 23,
height: 33,
callout:{
content:'终点',
}
}
markers.push(end)
//途经点,先将其分隔成为数组
let _waypoints = waypoints.split(';')
for (let i = 0, _len = _waypoints.length; i < _len; i++) {
let point = {
iconPath: "/static/tjd.png",
id: i,
longitude: parseFloat(_waypoints[i].split(",")[0]),
latitude: parseFloat(_waypoints[i].split(",")[1]),
width: 23,
height: 33,
callout:{
content:'途径点',
}
}
markers.push(point)
}
success(markers);
}
- Em seguida, showRouter () no script chama duas funções em js
Desde que a longitude e a latitude do ponto de partida e do ponto final sejam passadas, a rota planejada pode ser exibida no componente do mapa.
Desde que você passe no objeto array dos pontos na rota correspondente, os pontos passados podem ser exibidos na rota.
showRouter(){
let that = this;
var startPoi = that.longitude+','+that.latitude;
var wayPoi ="";
var endPoi = that.addressObj.longitude+','+that.addressObj.latitude;
Amap.line(startPoi, endPoi, wayPoi,function(res){
that.polyline=[];
that.polyline.push(res)
});
Amap.markers(startPoi,endPoi,wayPoi,function(res){
that.markers=[];
that.markers.push.apply(that.markers,res)
})
}
- renderizações
problema e solução
Problemas encontrados no uso da tecnologia e o processo de resolvê-los. Exige-se que a descrição e a solução do problema tenham determinado conteúdo e não possam ser resumidas precipitadamente. Permita que as pessoas que encontram problemas relacionados resolvam o problema depois de ler seu blog.
pergunta:
- Depois que a rota de navegação é exibida, o tamanho do zoom da página do mapa não pode ser bem controlado. Depois de exibir a rota, esperamos que a perspectiva do mapa cubra o ponto inicial da rota. Esse problema me incomodou por muito tempo. Fique ligado uma pequena parte do percurso. Uma vez resolvido, o campo de visão de toda a rota pode ser totalmente exibido.
resolver:
- De acordo com a distância entre os pontos iniciais da rota, utilizo uma função de ajuste para processar o tamanho da escala do mapa, para que o tamanho do zoom do mapa possa ser ajustado.
Retorne a distância de navegação solicitando o back-end, defina uma matriz de superfície para armazenar o valor da marca, converta a distância em km e atravesse a matriz de superfície, quando a distância for maior que o valor da matriz, defina a escala do mapa para o valor subscrito correspondente da superfície + 5. Desta forma, o controle do tamanho do zoom do mapa após a exibição da rota pode ser realizado.
uni.request({
/* url: 'http://47.95.151.202:8087/getDist/福州大学/福州三坊七巷', */
url: 'http://47.95.151.202:8087/getDist/'+that.myAddress+'/'+that.realAddress,
success: (res) => {
// 请求成功之后将数据给Info
var result = res.data;
console.log(that.myAddress);
console.log(that.realAddress);
if(result.code===200)
{
var surface = [500, 200, 100, 50, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1, 0.05, 0.02];
var isset=1;
var farthestDistance=result.data/1000;
console.log(result.data);
for(var i in surface) {
if(farthestDistance >surface[i]) {
that.myscale = 5 + Number(i);
isset=0;
break;
}
}
if(isset) that.myscale=16;
console.log(that.myscale);
};
if(result.code===500){
uni.showToast({
title: '获取距离错误，换个地点试试呗',
icon: 'none',
});
}
},
fail(err) {
res(err);
}
});
meu resumo
- Por meio desse aprendizado de mapa, dominei basicamente a implementação do mapa, o método de exibição da rota de navegação e o uso dos atributos e funções relacionados do componente do mapa, e ganhei muito.