对不起我的英语，正如后者在论坛中所寻求的那样。
原则上好的很简单，是什么让我对hehehe最生气。
我有.js的地图。
var map;
var idInfoBoxAberto;
var infoBox = [];
var markerAgrupado = [];
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myStyles =[
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
//características do mapa
var mapOptions = {
zoom: 17,
disableDefaultUI: true, //true = nao mostra os controles padroes(street viewer, botoes: mapa, terreno e satelite) e false para ativar tudo isso.
zoomControl: true, //true = permite controlar zoom e false o contrario. (sempre deixo ativado para que o cliente se localize melhor...)
panControl: false, //controle panoramico
mapTypeControl: false, //escolher tipo de mapa
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
styles: myStyles
};
//código dizendo que as características serão atribuídas ao elemento cujo ID no documento seja map-canvas
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
directionsDisplay.setMap(map); // Relacionamos o directionsDisplay com o mapa desejado
directionsDisplay.setOptions( { suppressMarkers: true } );
directionsDisplay.setPanel(document.getElementById("trajeto-texto"));
var icone = './images/maps-fit-me.png'; //código para passar o caminho da imagem do marcador.
// GEOLOCALIZAÇÃO
if(navigator.geolocation)
{navigator.geolocation.getCurrentPosition(function(position)
{
var posicaoAtual = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);//código que puxar a localização atual do meliante
var beachMarker = new google.maps.Marker({
position: posicaoAtual,
map: map,
icon: icone,
zoom: 17,
});//código do marcador personalizado.
map.setCenter(posicaoAtual);
function calcRoute(LatAca, LongAca) {
var start = posicaoAtual;
var end = LatAca + ',' + LongAca;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
$( "#trajeto-texto" ).css({'z-index' : '999999999999999999'});
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
function carregarPontos() {
function abrirInfoBox(id, marker) {
if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
infoBox[idInfoBoxAberto].close();
}
infoBox[id].open(map, marker);
idInfoBoxAberto = id;
}
var icone = './images/altere-maps-fit-me.png'; //código para passar o caminho da imagem do marcador.
$.getJSON('js/pontos.json', function(pontos) {
$.each(pontos, function(index, ponto) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
title: ponto.Descricao,
map: map,
icon: icone
});
var myWTF =
'<div id="iw-container">' +
'<div class="iw-title"><center>' + ponto.long_name +'<br><img src="images/avatar.png" width="60" height="auto"></center></div>' +
'<div class="iw-content">' +
'<table width="100%">'+
'<tr height="30">'+
'<td width="125" align="center">Fechado</td><td width="70"></td><td align="center">10 <img src="images/fitcoin.png" width="15" height="auto"></td>'+
'</tr>'+
'</table>'+
'<p>'+ ponto.endereco+'</p>'+
'<p>'+ ponto.telefones+' | '+ ponto.horario_abertura + ' - ' +ponto.horario_fechamento + '</p>'+
'<p align="center"><button onclick="top.location.href=\'' + 'treinos?a=' + ponto.Id +'\'">Entrar</button><button onclick="top.location.href=\'' + 'academias?id=' + ponto.Id +'\'">Ver perfil</button><button onclick="javascript:calcRoute(' + ponto.Latitude + ',' + ponto.Longitude +');" id="rota">Rota</button></p>'+
'</div>' +
'</div>';
infoBox[ponto.Id] = new google.maps.InfoWindow({
content: myWTF,
maxWidth: 350
});
infoBox[ponto.Id].marker = marker;
//função que faz o conteúdo da infowindow apareça somente quando você clica em cima do marcador
google.maps.event.addListener(marker, 'click', function() {
abrirInfoBox(ponto.Id, marker);
});
//função que faz o conteúdo da infowindow apareça somente quando você clica em cima do marcador
$( "#rota" ).click( function() {
calcRoute(ponto.Latitude,ponto.Longitude);
});
// Evento que fecha a infoWindow com click no mapa
google.maps.event.addListener(map, 'click', function() {
infoBox[ponto.Id].close();
$( "#trajeto-texto" ).css({'z-index' : '0'});
});
//document.getElementById('rota').addEventListener('click', function(){ alert('Testt');});
google.maps.event.addListener(infoBox[ponto.Id], 'domready', function() {
// Referência ao DIV que agrupa o fundo da infowindow
var iwOuter = $('.gm-style-iw');
/* Uma vez que o div pretendido está numa posição anterior ao div .gm-style-iw.
* Recorremos ao jQuery e criamos uma variável iwBackground,
* e aproveitamos a referência já existente do .gm-style-iw para obter o div anterior com .prev().
*/
var iwBackground = iwOuter.prev();
// Remover o div da sombra do fundo
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Remover o div de fundo branco
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
// Desloca a infowindow 115px para a direita
iwOuter.parent().parent().css({left: '115px'});
// Desloca a sombra da seta a 76px da margem esquerda
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});
// Desloca a seta a 76px da margem esquerda
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});
// Altera a cor desejada para a sombra da cauda
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(178, 178, 178, 0.6) 0px 1px 6px', 'z-index' : '1'});
// Referência ao DIV que agrupa os elementos do botão fechar
var iwCloseBtn = iwOuter.next();
// Aplica o efeito desejado ao botão fechar
iwCloseBtn.css({display: 'none', opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});
});
markers.push(marker);
});
var markerCluster = new MarkerClusterer(map, markers);
});
}
carregarPontos();
}, function()
{
handleNoGeolocation(true);
});
} else
{
handleNoGeolocation(false);
}
//FIM DA GEOLOCALIZAÇÃO
function handleNoGeolocation(errorFlag)
{
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
}//código informando erro caso o navegador do usuário não suporte geolocalização
//SearchBox
var markers = [];
var input = (document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox((input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
// Create a marker for each place.
var searchMarker = new google.maps.Marker({
map: map,
//icon: icone,
zoom: 17,
title: place.name,
position: place.geometry.location
});
markers.push(searchMarker);
google.maps.event.addListener(searchMarker, 'click', function() {
infowindow.open(map,searchMarker);
});//função que faz o conteúdo da infowindow apareça somente quando você clica em cima do marcador
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});//Fim da Search Box
}
google.maps.event.addDomListener(window, 'load', initialize);
initialize();
书签是从.json创建的，当点击标记时，他会显示一个infowindow。到目前为止美女真好！在这个infowindow中，我有一个按钮，用于将用户路径功能的当前位置加载到单击的标记。 所以，这个功能完美无缺，但我的onclick按钮不能分配No Way。
功能：
function calcRoute(LatAca, LongAca) {
var start = posicaoAtual;
var end = LatAca + ',' + LongAca;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
$( "#trajeto-texto" ).css({'z-index' : '999999999999999999'});
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
单击标记时打印的InfoWindow代码：
var myWTF =
'<div id="iw-container">' +
'<div class="iw-title"><center>' + ponto.long_name +'<br><img src="images/avatar.png" width="60" height="auto"></center></div>' +
'<div class="iw-content">' +
'<table width="100%">'+
'<tr height="30">'+
'<td width="125" align="center">Fechado</td><td width="70"></td><td align="center">10 <img src="images/fitcoin.png" width="15" height="auto"></td>'+
'</tr>'+
'</table>'+
'<p>'+ ponto.endereco+'</p>'+
'<p>'+ ponto.telefones+' | '+ ponto.horario_abertura + ' - ' +ponto.horario_fechamento + '</p>'+
'<p align="center"><button onclick="top.location.href=\'' + 'treinos?a=' + ponto.Id +'\'">Entrar</button><button onclick="top.location.href=\'' + 'academias?id=' + ponto.Id +'\'">Ver perfil</button><button onclick="javascript:calcRoute(' + ponto.Latitude + ',' + ponto.Longitude +');" id="rota">Rota</button></p>'+
'</div>' +
'</div>';
代码按钮：
<button onclick="javascript:calcRoute(' + ponto.Latitude + ',' + ponto.Longitude +');" id="rota">Rota</button>
我尝试将onclick放在上面，同时使用：
$( "#rota" ).click( function() {
calcRoute(ponto.Latitude,ponto.Longitude);
});
请为我的TCC非常重要：|
答案 0 :(得分：1)
infowindow的内容（包括#rota）尚未附加到文档中，直到infowindow的domready-event触发，jQuery无法找到该元素。
将此添加到您创建标记的循环中：
google.maps.event.addListenerOnce(infoBox[ponto.Id], 'domready', function() {
var that=this;
$( "#rota" ).click( function() {
calcRoute(that.getPosition().lat(),that.getPosition().lng());
});
});
答案 1 :(得分：1)
您的代码样式有些不一致。看来您的约定没有在括号之间使用空格，但是在某些地方您使用空格，请尽快解决此问题，因为您的代码在当前状态下不可读。下面是一些示例：
.recv()答案 2 :(得分：0)
另一件事：改进代码的一种好方法是将其包装在函数中：
function open(tag, attrs) {
return `<${tag} attrs>`
}
function openDiv(attrs) {
return open('div', attrs)
}
function close(tag) {
return `</${tag}>`
}
function closeDiv() {
return close('div')
}
function closeP() {
return close('p')
}
var myWTF =
openDiv('id="iw-container"') +
openDiv('class="iw-title"')open('center')' + ponto.long_name + open('br')' + open('img', 'src="images/avatar.png" width="60" height="auto"') + close('center')+ close('div') +
open('div', 'class="iw-content"') +
open('table', 'width="100%"')+
open('tr', 'height="30"')+
open('td', 'width="125" align="center"')Fechado</td><td width="70"></td><td align="center">10 <img src="images/fitcoin.png" width="15" height="auto"></td>'+
close('tr')+
close('table')+
open('p')+ ponto.endereco+
closeP()+
open('p')+ ponto.telefones+' | '+
ponto.horario_abertura + ' - ' +ponto.horario_fechamento +
closeP()+ openP('align="center"') +
'<button onclick="top.location.href=\'' +
'treinos?a=' + ponto.Id +'\'">Entrar</button><button onclick="top.location.href=\'' + 'academias?id=' + ponto.Id +
'\'">Ver perfil</button><button onclick="javascript:calcRoute(' + ponto.Latitude + ',' +
ponto.Longitude +');" id="rota">Rota</button></p>'+
closeDiv() +
closeDiv();
答案 3 :(得分：-1)
您可以看一下Google Maps API的工作方式。那么您应该知道它与JQUERY完全不兼容