Skip to content

Instantly share code, notes, and snippets.

@Wpkenpachi
Created August 24, 2019 21:50
Show Gist options
  • Save Wpkenpachi/581757d8f6dcc6caa54f2264d75bde0b to your computer and use it in GitHub Desktop.
Save Wpkenpachi/581757d8f6dcc6caa54f2264d75bde0b to your computer and use it in GitHub Desktop.
Exemplo de uso do vue-googlemaps
<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