A) Detalhes – principal
Planejador de rota antecipado é uma ferramenta A a BOTHPLANNER escrita em JavaScript puro com Google mapa ver. 3 API. tem recursos muito avançados como:
1) Camada climática adicionada no mapa do Google com API OpenWeather
2) Calculadora de trânsito adicionada
3) Pesquisa de local adicionada em todas as caixas de texto de localização.
4) Corrigidos erros.
5) Calculadora de combustível.
6) Classificação de locais.
7) seção de ajuda adicionada.
Seleção de unidade de distância adicionada.
9) CSS otimizado, JS para minimizar o carregamento da página.
10) Camada de tráfego adicionada.
11) Caixa de pesquisa para localização próxima.
12) Detecção de localização automática.
13) Adicionou lugares no Google nas proximidades.
14) Agora você pode adicionar vários waypoints
15) Obtenha a rota mais curta de vários waypoints
16) Obtenha o custo da viagem / excursão por calculadora de custos
17) Converta KM em milhas facilmente
18) Responsabilidade.
19) Google Adsense.
20) Rota de arrastar, ajuste a rota conforme sua exigência.
21) Compartilhe o gerador de link capaz.
22) Botão de impressão.
23) Altere a linguagem do mapa do Google.
24) Corrija seu ponto de partida / final com facilidade e obtenha as instruções de rota adequadas em detalhes via API do Google.
Essa ferramenta pode ser facilmente anexada a quaisquer projetos existentes.
Se você tiver alguma consulta, pode entrar em contato conosco a qualquer momento minha página de perfil ou passagem para aumentar.
Como usar – principal
Extraia todos os arquivos formam o zip. O arquivo que você precisa incluir o Google API JavaScript junto com o routeplannerapi.js.
Se você quiser instalar o plug -in em seu site, siga abaixo depois de configurar as configurações acima
Inclua bibliotecas abaixo
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=adsense"></script> <script src="js/routeplannerapi.min.js"></script>
Configure forma, para iniciar e terminar o local e chamar Calcroute (); função no botão Enviar como abaixo:
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="start">Starting Location :</label> <input type="text" class="form-control" id="start" placeholder="Enter Starting Location"> </div> <div class="form-group"> <label class="sr-only" for="end">Destination Location :</label> <input type="text" class="form-control" id="end" placeholder="Enter Destination Location"> </div> <div class="form-group"> <select class="form-control" id="mode" name="mode"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option> <option value="TRANSIT">Transit</option> </select> </div> <button type="button" class="btn btn-success" onClick="calcRoute();">Get Route</button> </form>
Adicione o Google Map Div e o Google Direction div na página como abaixo
<div id="map-canvas" /> <div id="directionsPanel" />
É isso ! Você está pronto para ir se quiser fazer alguma alteração, siga as instruções abaixo:
var _ZNRPL = { latitude : 41.850033, longitude : -87.6500523, start:"", end:"", adsense:true, publisherid:"ca-google-maps_apidocs", adformat : "BANNER", adposition : "RIGHT_BOTTOM", adbackgroundColor: '#c4d4f3', adborderColor: '#e5ecf9', adtitleColor: '#0000cc', adtextColor: '#000000', adurlColor: '#009900' };
Você pode definir as variáveis, conforme sua exigência como abaixo:
Você pode definir o local central quando a página carregar, fornecendo latitude e longitude da sua localização.
latitude : 41.850033, longitude : -87.6500523,
Você pode configurar seu local inicial ou final como abaixo
start:"Chicago", end : "New York",
Você pode ativar ou desativar o Google AdSense como abaixo
adsense:true,
Se o AdSense estiver ativado, você precisará definir seu ID do editor como abaixo
publisherid:"ca-google-maps_apidocs",
Se o AdSense estiver ativado, você precisará definir o tipo de formato de banner como abaixo
adformat : "BANNER",
De acordo com o Google Adsense, o formato de banner pode ser:
LEADERBOARD
Cria uma área de exibição totalmente horizontal.BANNER
Cria um anúncio horizontal de “banner”.HALF_BANNER
Cria um anúncio horizontal menor de “banner”.SKYSCRAPER
cria um grande anúncio vertical.WIDE_SKYSCRAPER
Cria um amplo anúncio vertical usando tipo maior.VERTICAL_BANNER
cria um anúncio vertical de tamanho médio.BUTTON
cria um pequeno anúncio.SMALL_SQUARE
cria um anúncio quadrado um pouco maior.SQUARE
Cria um grande anúncio quadrado com tipo grande.SMALL_RECTANGLE
cria um pequeno anúncio retangular.MEDIUM_RECTANGLE
cria um anúncio retangular médio.LARGE_RECTANGLE
cria um grande anúncio retangular.SMALL_VERTICAL_LINK_UNIT
cria uma pequena unidade de ligação vertical.MEDIUM_VERTICAL_LINK_UNIT
Cria uma unidade de ligação vertical média.LARGE_VERTICAL_LINK_UNIT
cria uma grande unidade de ligação vertical.X_LARGE_VERTICAL_LINK_UNIT
Cria uma unidade de ligação vertical extra grande.SMALL_HORIZONTAL_LINK_UNIT
Cria uma pequena unidade de link horizontal.LARGE_HORIZONTAL_LINK_UNIT
Cria uma grande unidade de link horizontal.
Se o AdSense estiver ativado, você precisará definir a posição de banner como abaixo
adposition : "RIGHT_BOTTOM",
De acordo com o Google Adsense, a posição do banner pode ser:
TOP_CENTER
indica que a adunit deve ser colocada ao longo do centro superior do mapa.TOP_LEFT
Indica que a adunit deve ser colocada ao longo do canto superior esquerdo do mapa, com quaisquer subelementos do controle “fluindo” em direção ao centro superior.TOP_RIGHT
Indica que a adunit deve ser colocada ao longo do canto superior direito do mapa, com quaisquer subelementos do controle “fluindo” em direção ao centro superior.LEFT_TOP
indica que a adunit deve ser colocada ao longo do canto superior esquerdo do mapa, mas abaixo de qualquerTOP_LEFT
elementos.RIGHT_TOP
indica que a adunit deve ser colocada ao longo do canto superior direito do mapa, mas abaixo de qualquerTOP_RIGHT
elementos.LEFT_CENTER
indica que a adunit deve ser colocada ao longo do lado esquerdo do mapa, centrado entre oTOP_LEFT
eBOTTOM_LEFT
posições.RIGHT_CENTER
indica que a adunit deve ser colocada ao longo do lado direito do mapa, centrado entre o
TOP_RIGHT
eBOTTOM_RIGHT
posições.LEFT_BOTTOM
indica que a adunit deve ser colocada ao longo da parte inferior esquerda do mapa, mas acima de qualquerBOTTOM_LEFT
elementos.RIGHT_BOTTOM
indica que a adunit deve ser colocada ao longo do canto inferior direito do mapa, mas acima de qualquerBOTTOM_RIGHT
elementos.BOTTOM_CENTER
indica que a adunit deve ser colocada ao longo do centro inferior do mapa.BOTTOM_LEFT
Indica que a adunit deve ser colocada ao longo da parte inferior esquerda do mapa, com quaisquer subelementos do controle “fluindo” em direção ao centro inferior.BOTTOM_RIGHT
indica que a adunit deve ser colocada ao longo do canto inferior direito do mapa, com quaisquer subelementos do controle “fluindo” em direção ao centro inferior.
Se o AdSense estiver ativado, você deve definir o esquema de Banner de cores como abaixo no formato hexadecimal
adbackgroundColor: '#c4d4f3', adborderColor: '#e5ecf9', adtitleColor: '#0000cc', adtextColor: '#000000', adurlColor: '#009900'