Created
August 24, 2019 21:50
-
-
Save Wpkenpachi/581757d8f6dcc6caa54f2264d75bde0b to your computer and use it in GitHub Desktop.
Exemplo de uso do vue-googlemaps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div id="inicio"> | |
<!-- LINHA 1 --> | |
<b-row> | |
<b-col col lg="12" class="demo"> | |
<googlemaps-map ref="map" class="map" :center.sync="map.center" :zoom.sync="map.zoom"> | |
<!-- User Position --> | |
<googlemaps-user-position @update:position="setUserPosition"/> | |
<!-- Estabelecimento Marker --> | |
<googlemaps-marker | |
:title="map.userPosition.estabelecimento" | |
:draggable="false" | |
:position="map.userPosition" | |
/> | |
<!-- Motoboys Marker --> | |
<googlemaps-marker | |
v-for="(marker, mk) of map.markers" | |
:key="mk" | |
:title="marker.motoboy_name" | |
:draggable="false" | |
:position="{ lat: marker.lat, lng: marker.lng }" | |
:icon="map.motoboyIcon" | |
/> | |
</googlemaps-map> | |
</b-col> | |
<!-- <b-col col lg="4"> | |
<b-card title="Bairros e Preços"> | |
<b-form-group id="select-bairro-group" label="Selecionar Bairro:" label-for="input-3"> | |
<b-form-select | |
id="select-bairro" | |
v-model="selected_bairro" | |
:options="bairros_to_select" | |
required | |
></b-form-select> | |
<b-form-group style="margin-top: 10px;"> | |
<b-button block variant="dark">Solicitar Motoboy</b-button> | |
</b-form-group> | |
</b-form-group> | |
</b-card> | |
</b-col>--> | |
</b-row> | |
<!-- LINHA 2 --> | |
<b-row> | |
<b-col col lg="12" style="overflow-x:auto;"> | |
<table class="table"> | |
<thead> | |
<th v-for="(header, h) of entregas_em_andamento_keys" :key="h">{{ header.label }}</th> | |
</thead> | |
<tbody> | |
<tr v-for="(entrega, e) of entregas_em_andamento" :key="e"> | |
<td> | |
<b-img | |
v-bind="imgFieldsProps" | |
:src="entrega.entregador.img" | |
rounded | |
alt="Rounded image" | |
></b-img> | |
</td> | |
<td>{{ entrega.entregador.nome }}</td> | |
<td>{{ entrega.distancia }}</td> | |
<td>{{ entrega.destino }}</td> | |
<td>R$ {{ entrega.valor }}</td> | |
<td>R$ {{ entrega.pagamento }}</td> | |
<td> | |
<b-badge :variant="statusColor(entrega.status.slug)">{{ entrega.status.text }}</b-badge> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</b-col> | |
</b-row> | |
</div> | |
</template> | |
<script> | |
import { Map } from "vue-googlemaps"; | |
export default { | |
components: { | |
Map | |
}, | |
data() { | |
return { | |
imgFieldsProps: { blank: false, width: 75, height: 60, class: "m1" }, | |
map: { | |
motoboyIcon: { | |
url: "https://img.icons8.com/color/48/000000/motorbike-helmet.png" | |
}, | |
zoom: 15, | |
userPosition: { | |
estabelecimento: "Rei do Caldo", | |
lat: -14.87334789, | |
lng: -40.84690155 | |
}, | |
center: { | |
lat: -14.87334789, | |
lng: -40.84690155 | |
}, | |
markers: [ | |
{ | |
motoboy_name: "Gilmar", | |
local: "filipinas", | |
lat: -14.87309902, | |
lng: -40.84721268 | |
}, | |
{ | |
motoboy_name: "Márcio", | |
local: "trilha do sul", | |
lat: -14.87050666, | |
lng: -40.84485234 | |
}, | |
{ | |
motoboy_name: "Nilson", | |
local: "movel", | |
lat: -14.87114957, | |
lng: -40.85167588 | |
}, | |
{ | |
motoboy_name: "Tayrone", | |
local: "posto sao jorge", | |
lat: -14.86739578, | |
lng: -40.85098924 | |
} | |
] | |
}, | |
selected_bairro: null, | |
bairros: [ | |
{ | |
nome_bairro: "Bairro Brasil", | |
nome_bairro_slug: "bairro_brasil", | |
valor: 4.5 | |
}, | |
{ | |
nome_bairro: "Felícia", | |
nome_bairro_slug: "felicia", | |
valor: 10.4 | |
}, | |
{ | |
nome_bairro: "Vila Serrana", | |
nome_bairro_slug: "vila_serrana", | |
valor: 7.4 | |
}, | |
{ | |
nome_bairro: "Candeias", | |
nome_bairro_slug: "candeias", | |
valor: 6.0 | |
} | |
], | |
entregas_em_andamento_keys: [ | |
{ | |
key: "entregador.img", | |
label: "Entregador" | |
}, | |
{ | |
key: "entregador.nome", | |
label: "Nome" | |
}, | |
{ | |
key: "distancia", | |
label: "Distância" | |
}, | |
{ | |
key: "destino", | |
label: "Destino" | |
}, | |
{ | |
key: "valor", | |
label: "Valor" | |
}, | |
{ | |
key: "pagamento", | |
label: "Pagamento" | |
}, | |
{ | |
label: "Status" | |
} | |
], | |
entregas_em_andamento: [ | |
{ | |
entregador: { | |
img: | |
"http://www.motoboyfaccil.com.br/images/banner-carro-e-moto-simulador-de-consorcio.png", | |
nome: "Gilmar" | |
}, | |
distancia: 350, | |
destino: "vila_serrana", | |
valor: 4, | |
pagamento: 4 + (350 * 0.2) / 10, | |
status: { slug: "em_andamento", text: "Em andamento" } | |
} | |
] | |
}; | |
}, | |
computed: { | |
bairros_to_select() { | |
const bairros = []; | |
bairros.push({ | |
disabled: true, | |
text: "Selecione um Bairro", | |
value: null | |
}); | |
this.bairros.forEach(bairro => { | |
bairros.push({ | |
text: `${bairro.nome_bairro} - R$ ${bairro.valor}`, | |
value: bairro.valor | |
}); | |
}); | |
return bairros; | |
} | |
}, | |
methods: { | |
statusColor(status) { | |
let result = null; | |
switch (status) { | |
case "em_andamento": | |
result = "warning"; | |
break; | |
case "cancelado": | |
result = "danger"; | |
break; | |
case "concluido": | |
result = "success"; | |
break; | |
} | |
return result; | |
}, | |
setUserPosition(position) { | |
this.userPosition = position; | |
} | |
} | |
}; | |
</script> | |
<style scoped> | |
.demo { | |
height: 100%; | |
min-height: 350px; | |
display: flex; | |
flex-direction: column; | |
} | |
.map { | |
flex: 100% 1 1; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment