O front-end vue imita o mapa Didi taxi Baidu para localizar táxis próximos ou armazenar informações. Para baixar o código completo, visite o endereço do mercado de plug-ins uni-app: https://ext.dcloud.net.cn/plugin? id=12982
As renderizações são as seguintes:
#
#### Instruções
```Como usar
#Instale o plug-in vue-baidu-map
npm install vue-baidu-map --save
<!-- center: ponto central do mapa zoom: taxa de zoom do mapa -->
<baidu-map v-show="seen" class="bm-view" :center="centerPoint" :zoom="10">
<bm-control class='bmControl'>
<div class="bmTopView">
<!-- nome -->
<view class="netView">{ {infoName}}
</view>
<!-- Detalhes + botão de táxi -->
<view class="rowView">
<view class="midView">{ {infoDetail}}</view>
<view class="locImg" v-show="followIsHide">Visualizar</view>
</view>
</div>
<!-- Ícones de carros perto da minha localização -->
<div class="bmBotView">
<image class="userIcon" src="../../static/img/biz/person.svg"></image>
<view class="userName">定位</view>
<image class="userIcon" src="../../static/img/biz/car.svg"></image>
<view class="userName">Carros próximos</view>
</div>
<view style="height: 2rpx;"></view>
</bm-control>
<!-- Ponto de ancoragem -->
<bm-marker title="" v-for="(item,index) in netList" :key="100 + index" :data-index="index"
@click="netCurClick(item)" :position="{lng: item.longitude, lat: item.latitude}"
:icon="{url: 'static/img/biz/person.svg', tamanho: {largura: 34, altura: 34}}">
</bm-marker>
<!-- Carros próximos -->
<bm-marker title="" v-for="(item,index) in nearComList" :key="200 + index" @click="companyCurClick(item)"
:position="{lng: item.longitude, lat: item.latitude}"
:icon="{url: 'static/img/biz/car.svg', tamanho: {largura: 34, altura: 34}}">
</bm-marker>
</baidu-map>
```
#### Seção de código HTML
```html
<modelo>
<view class="conteúdo">
<!-- center: ponto central do mapa zoom: taxa de zoom do mapa -->
<baidu-map v-show="seen" class="bm-view" :center="centerPoint" :zoom="10">
<bm-control class='bmControl'>
<div class="bmTopView">
<!-- nome -->
<view class="netView">{ {infoName}}
</view>
<!-- Detalhes + botão de táxi -->
<view class="rowView">
<view class="midView">{ {infoDetail}}</view>
<view class="locImg" v-show="followIsHide">Visualizar</view>
</view>
</div>
<!-- Ícones de carros perto da minha localização -->
<div class="bmBotView">
<image class="userIcon" src="../../static/img/biz/person.svg"></image>
<view class="userName">定位</view>
<image class="userIcon" src="../../static/img/biz/car.svg"></image>
<view class="userName">Carros próximos</view>
</div>
<view style="height: 2rpx;"></view>
</bm-control>
<!-- Ponto de ancoragem -->
<bm-marker title="" v-for="(item,index) in netList" :key="100 + index" :data-index="index"
@click="netCurClick(item)" :position="{lng: item.longitude, lat: item.latitude}"
:icon="{url: 'static/img/biz/person.svg', tamanho: {largura: 34, altura: 34}}">
</bm-marker>
<!-- Carros próximos -->
<bm-marker title="" v-for="(item,index) in nearComList" :key="200 + index" @click="companyCurClick(item)"
:position="{lng: item.longitude, lat: item.latitude}"
:icon="{url: 'static/img/biz/car.svg', tamanho: {largura: 34, altura: 34}}">
</bm-marker>
</baidu-map>
</view>
</modelo>
```
#### Código JS (introduzir o componente para preencher os dados)
```javascript
<script>
importar visualização de 'visualizar'
importar BaiduMap de 'vue-baidu-map'
importar {
BmlMarkerClusters
} de 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak é a chave aplicada na plataforma de desenvolvedor de mapas Baidu, consulte http://lbsyun.baidu.com/apiconsole/key para obter detalhes */
ak: 'dEctYrTTeVr76ANfzG7XwYZGPj'
});
padrão de exportação {
componentes: {
},
dados() {
retornar {
nearComList: [], // Lista de oportunidades de negócios próximas
infoNome: '',
infoDetail: '',
tabbarIsHide: falso,
followIsHide: falso,
visto: verdadeiro,
netList: [],
netItem: {},
// Coordenadas do centro {lng: 113.282202, lat:23.13771 }
ponto central: {
lng: 113.282202,
lat: 23.13771
}
};
},
montado: function(e) {
deixe meuEste = isto;
this.netItem = {
'orgName': 'Meu Endereço',
'orgAddr': 'Endereço detalhado',
'longitude': '113.22',
'latitude': '23.12'
};
this.netList.push(this.netItem);
this.infoName = this.netItem.orgName;
this.infoDetail = this.netItem.orgAddr;
this.nearComList = [{
'comName': 'Nome do carro',
'comAddr': 'Endereço de detalhes do carro',
'longitude': '113.262',
'latitude': '23.2128'
},
{
'comName': 'Nome do carro 2',
'comAddr': 'Endereço detalhado do carro 2',
'longitude': '113.532632',
'latitude': '23.1228'
},
{
'comName': 'Nome do carro 3',
'comAddr': 'Endereço detalhado do carro 3',
'longitude': '113.42632',
'latitude': '23.1228'
},
{
'comName': 'Nome do carro 4',
'comAddr': 'Endereço detalhado do carro 4',
'longitude': '113.327632',
'latitude': '23.16228'
},
{
'comName': 'Nome do carro 5',
'comAddr': 'Endereço detalhado do carro 5',
'longitude': '113.324632',
'latitude': '23.3228'
},
{
'comName': 'Nome do carro 6',
'comAddr': 'Endereço detalhado do carro 6',
'longitude': '113.1632',
'latitude': '23.2228'
}
];
},
métodos: {
showOrHideTabbar() {
this.tabbarIsHide = !this.tabbarIsHide;
if (this.tabbarIsHide) {
uni.hideTabBar();
} outro {
uni.showTabBar();
}
},
netCurClick(item) {
this.followIsHide = falso;
this.infoName = this.netItem.orgName;
this.infoDetail = this.netItem.orgAddr;
},
empresaCurClick(item) {
this.followIsHide = verdadeiro;
this.infoName = item.comName;
this.infoDetail = item.comAddr;
console.log('Item de coordenadas do cliente = ' + JSON.stringify(item));
},
// Calcula a distância entre dois pontos
getDistance(lat1, lng1, lat2, lng2) {
deixe EARTH_RADIUS = 6378.137;
deixe radLat1 = this.rad(lat1);
deixe radLat2 = this.rad(lat2);
deixe a = radLat1 - radLat2;
deixe b = this.rad(lng1) - this.rad(lng2);
let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) * Math.cos(radLat2) *
Math.pow(Math.sin(b / 2), 2)));
s = s * EARTH_RADIUS;
//s = Math.round(s * 10000d) / 10000d;
s = Math.round(s * 10000) / 10000;
s = s * 1000; //multiplicado por 1000 é convertido em metros
retornar s;
},
rad(d) {
return d * Math.PI / 180.0;
},
},
};
</script>
```
####CSS
```CSS
<estilo>
.contente {
exibição: flexível;
flex-direction: coluna;
largura: 100%;
altura: 100%;
estouro: oculto;
}
/* procurar*/
.vista do topo {
margem superior: 2px;
largura: 100%;
altura: 56px;
exibição: flexível;
flex-direction: linha;
}
.uni-search {
alinhamento de texto: centro;
justificar-conteúdo: centro;
largura: 88%;
altura: 30px;
cor de fundo: #F2F2F2;
}
.changeIcon {
margem esquerda: -2px;
margem superior: 27 rpx;
largura: 12%;
altura: 24px;
}
/* .meuSwitch {
largura: 208rpx;
margem esquerda: 3px;
altura: 56rpx;
margem superior: 22rpx;
} */
/* mapa */
.bm-view {
largura: 100%;
altura: calc(100vh - 154px);
}
/* controle personalizado */
.bmControl {
margem superior: calc(100vh - 284px);
largura: 100vw;
margem esquerda: 0vw;
altura: 90px;
cor de fundo: branco;
raio da borda: 8rpx;
}
.bmTopView {
exibição: flexível;
flex-direction: coluna;
margem esquerda: 26rpx;
margem superior: 12 rpx;
largura: 100%;
altura: 112rpx;
}
.rowView {
exibição: flexível;
flex-direction: linha;
}
.netView {
tamanho da fonte: 16px;
peso da fonte: 500;
cor: #333333;
altura da linha: 26px;
família de fontes: PingFangSC-Semibold, PingFang SC;
}
.midView {
exibição: flexível;
flex-direction: linha;
margem esquerda: 6rpx;
cor: #666666;
largura: 70%;
altura: 60rpx;
altura da linha: 50rpx;
tamanho da fonte: 13px;
}
.locImg {
margem esquerda: 2px;
margem superior: 0rpx;
largura: 74px;
altura: 30px;
cor de fundo: #1677FF;
raio da borda: 32px;
cor: #FFFFFF;
alinhamento de texto: centro;
altura da linha: 30px;
}
.bmBotView {
exibição: flexível;
flex-direction: linha;
margem esquerda: 6rpx;
altura: 36px;
}
.bmBotleftView {
largura: 70%;
exibição: flexível;
flex-direction: linha;
}
.userIcon {
margem esquerda: 24rpx;
margem superior: 4rpx;
largura: 20px;
altura: 20px;
}
.nome de usuário {
alinhamento de texto: centro;
margem esquerda: 2px;
margem superior: 0rpx;
largura: automático;
altura: 24px;
altura da linha: 24px;
tamanho da fonte: 26rpx;
cor: #999999;
raio da borda: 3px;
}
.pullScrollView {
exibição: flexível;
flex-direction: coluna;
altura: automático;
largura: 100%;
cor de fundo: #F2F2F2;
}
.uni-list {
margem superior: 0px;
altura: 100%;
}
.uni-list-cell {
exibição: flexível;
flex-direction: coluna;
margem inferior: 12px;
largura: 91%;
margem esquerda: 4,5%;
altura: automático;
cor de fundo: #FFFFFF;
raio da borda: 12 rpx;
}
.list-text {
margem esquerda: 34rpx;
altura da linha: 44px;
largura: 100%;
tamanho da fonte: 32rpx;
cor: #333333;
altura: 44px;
}
.list-textDetail {
margem esquerda: 34rpx;
altura da linha: 40rpx;
largura: 100%;
tamanho da fonte: 28rpx;
cor: #666666;
altura: 40rpx;
margem inferior: 40 rpx;
}
.checkbtn {
margem superior: -12px;
margem esquerda: 8px;
alinhamento de texto: centro;
largura: 160rpx;
tamanho da fonte: 26rpx;
cor: #1677FF;
cor de fundo: #E7F1FF;
altura: 34px;
altura da linha: 34px;
raio da borda: 34rpx;
}
</estilo>
```