为什么信息窗口没有锚定在标记上

标记显示在地图上。当我点击任何标记时，相关信息都会出现，但不会出现在标记上方，而是显示在最后一个标记位置。我正在使用Phalcon。这是表格数据。

<table id="clientes" class="table table-bordered">
<tr>
<td>800000CD-1325103412</td>
<td>SUAREZ ORRILA MARTHA BELGICA</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4843903</td>
<td>-0.1976840</td>
<td>SUAREZ ORRILA MARTHA BELGICASalinas </td>
<td>1</td>
</tr>
<tr>
<td>800000D2-1325103412</td>
<td>ESPINAL CHOEZ BLANCA CAFERINA:Sucursal 1ero de Mayo</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4887009</td>
<td>-0.2008060</td>
<td>Barrio 1ero de Mayo. Av. PrincipalAyangue24000</td>
<td>1</td>
</tr>
<tr>
<td>800000D3-1325103412</td>
<td>CHANG CORDOVA RENNE ANTONINA</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4888077</td>
<td>-0.2022650</td>
<td>Vía a Santa Elena , Av principal S/NSanta Elena24000</td>
<td>1</td>
</tr>
<tr>
<td>800000D5-1325103412</td>
<td>BURGOS BRIONES YISELA MARIA</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4862900</td>
<td>-0.2039710</td>
<td>Chipipe: Av. Los Almendros s/n y Av. EloySalinas24000</td>
<td>1</td>
</tr>
<tr>
<td>800000E3-1325103413</td>
<td>SANTANA MOREIRA GABINO PUBLIO</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4814529</td>
<td>-0.2026510</td>
<td>P.Icaza 615 entre Boyaca y EscobedoGUAYAQUIL090000</td>
<td>1</td>
</tr>
<tr>
<td>800000E6-1325103413</td>
<td>RENDON TOBAR MARIA MAGDALENA</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4900131</td>
<td>-0.2085306</td>
<td>Cdla. Alborada, José M. Egas Y Rodolfo BaGuayaquil09000</td>
<td>1</td>
</tr>
<tr>
<td>800000F0-1325103414</td>
<td>MOLINA HERNÁNDEZ RUTH CRISTINA</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4900131</td>
<td>-0.2085306</td>
<td>Cdla. Urdenor 1 Mz. 121, S.Ignacio RoblesGuayaquil09000</td>
<td>1</td>
</tr>
<tr>
<td>800000F6-1325103414</td>
<td>SOCIEDAD DE HECHO SAMBAC</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4878540</td>
<td>-0.2086160</td>
<td>Vía a Samborondón, junto al Banco del PacGuayaquil090150</td>
<td>1</td>
</tr>
<tr>
<td>80000108-1325103415</td>
<td>ECHEVERRIA VIVAR PAOLA MICHEL</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4894638</td>
<td>-0.2091737</td>
<td>Av. Carlos Julio Arosemena y Av. Las MonjGuayaquil09000</td>
<td>1</td>
</tr>
<tr>
<td>8000010A-1325103415</td>
<td>COMERCIO MARSANTOS S.A.</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4856262</td>
<td>-0.2091740</td>
<td>   </td>
<td>1</td>
</tr>
</table>
<div id="floating-panel">
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">
</div>
<div id="map_canvas"></div>

我试图修复的javascript代码是showMarkers函数，其余代码并不重要。

我正在分析这个表，得到经度和纬度，以及客户端的名称。

initMap函数作为回调函数运行

https://maps.google.com/maps/api/js?key=MY_API_KEY&callback=initMap

var map, infoWindow;
var marcas = [];
function deleteMarkers() {
var myLatLng = {lat: -0.1976840, lng: -78.4843903};
var myLatLng1 = {lat: -0.2085306, lng: -78.4900131};
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: myLatLng
});
var marker1 = new google.maps.Marker({
position: myLatLng1,
map: map,
title: 'El Morlan'
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
function clearMarkers() {
}
function showMarkers() {
let table = document.getElementById("clientes");
for (let i = 0; i < table.rows.length; i++) {

let icono = 'https://www.carrillosteam.com/public/coop/images/logos/map_pin.png';
let row = table.rows[i];
let longitud = row.cells[5].innerHTML;
let latitud = row.cells[6].innerHTML;
let cliente = row.cells[1].innerHTML;
var geolocation = new google.maps.LatLng(latitud, longitud);
var marker = new google.maps.Marker({
map: map,
position: geolocation,
icon: icono
});
marcas.push(marker);
marker.addListener('click', function(){
map.panTo(marker.position);
var contenido = '<div><strong>' + cliente + '</strong><br>';
contenido += '<span> LONGITUD: ' + longitud + '</span><br>';
contenido += '<span> LATITUD: ' + latitud + '</span>';
infoWindow.setContent(contenido);
infoWindow.open(map, marker);
});
{#            alert('Longitud : ' + longitud + ' Latitud : ' + latitud + ' Cliente : ' + cliente);#}
}
}
function initMap() {
var coqueiros = new google.maps.LatLng(-0.2039710, -78.4862900);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: coqueiros,
zoom: 12
});
infoWindow = new google.maps.InfoWindow;
}

我在您的JS中评论了我的更改。它现在应该按预期工作了。

//you use both var and let for your variables throughout, should only use one or the other
var map, infoWindow;
var marcas = [];
//moved your icono to be a global variable
let icono = 'https://www.carrillosteam.com/public/coop/images/logos/map_pin.png';
function deleteMarkers() {
var myLatLng = {lat: -0.1976840, lng: -78.4843903};
var myLatLng1 = {lat: -0.2085306, lng: -78.4900131};
var map = new google.maps.Map(document.getElementById('map_canvas'), {
	zoom: 12,
center: myLatLng
});
var marker1 = new google.maps.Marker({
	position: myLatLng1,
map: map,
title: 'El Morlan'
});
var marker2 = new google.maps.Marker({
	position: myLatLng,
map: map,
title: 'Hello World!'
});
}
function clearMarkers() { }
function showMarkers() {
let table = document.getElementById("clientes");
for (let i = 0; i < table.rows.length; i++) {
	let row = table.rows[i];
let longitud = row.cells[5].innerHTML;
let latitud = row.cells[6].innerHTML;
let cliente = row.cells[1].innerHTML;
var geolocation = new google.maps.LatLng(latitud, longitud);
var marker = new google.maps.Marker({
	map: map,
position: geolocation,
icon: icono
});
marcas.push(marker);
marker.addListener('click', function(){
	map.panTo(marker.position);
var contenido = '<div><strong>' + cliente + '</strong><br>';
	contenido += '<span> LONGITUD: ' + longitud + '</span><br>';
	contenido += '<span> LATITUD: ' + latitud + '</span>';
	var infoWindow = new google.maps.InfoWindow({
		content: contenido
	});
//because of your context being inside a function inside a loop, you want to use this instead of marker
infoWindow.open(map, this);
});
}
}
function initMap() {
	var coqueiros = new google.maps.LatLng(-0.2039710, -78.4862900);
map = new google.maps.Map(document.getElementById('map_canvas'), {
	center: coqueiros,
zoom: 12
});
}

#map_canvas {
height: 400px;
width: 400px;
}

<table id="clientes" class="table table-bordered">
<tr>
<td>800000CD-1325103412</td>
<td>SUAREZ ORRILA MARTHA BELGICA</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4843903</td>
<td>-0.1976840</td>
<td>SUAREZ ORRILA MARTHA BELGICASalinas</td>
<td>1</td>
</tr>
<tr>
<td>800000D2-1325103412</td>
<td>ESPINAL CHOEZ BLANCA CAFERINA:Sucursal 1ero de Mayo</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4887009</td>
<td>-0.2008060</td>
<td>Barrio 1ero de Mayo. Av. PrincipalAyangue24000</td>
<td>1</td>
</tr>
<tr>
<td>800000D3-1325103412</td>
<td>CHANG CORDOVA RENNE ANTONINA</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4888077</td>
<td>-0.2022650</td>
<td>Vía a Santa Elena , Av principal S/NSanta Elena24000</td>
<td>1</td>
</tr>
<tr>
<td>800000D5-1325103412</td>
<td>BURGOS BRIONES YISELA MARIA</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4862900</td>
<td>-0.2039710</td>
<td>Chipipe: Av. Los Almendros s/n y Av. EloySalinas24000</td>
<td>1</td>
</tr>
<tr>
<td>800000E3-1325103413</td>
<td>SANTANA MOREIRA GABINO PUBLIO</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4814529</td>
<td>-0.2026510</td>
<td>P.Icaza 615 entre Boyaca y EscobedoGUAYAQUIL090000</td>
<td>1</td>
</tr>
<tr>
<td>800000E6-1325103413</td>
<td>RENDON TOBAR MARIA MAGDALENA</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4900131</td>
<td>-0.2085306</td>
<td>Cdla. Alborada, José M. Egas Y Rodolfo BaGuayaquil09000</td>
<td>1</td>
</tr>
<tr>
<td>800000F0-1325103414</td>
<td>MOLINA HERNÁNDEZ RUTH CRISTINA</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4900131</td>
<td>-0.2085306</td>
<td>Cdla. Urdenor 1 Mz. 121, S.Ignacio RoblesGuayaquil09000</td>
<td>1</td>
</tr>
<tr>
<td>800000F6-1325103414</td>
<td>SOCIEDAD DE HECHO SAMBAC</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4878540</td>
<td>-0.2086160</td>
<td>Vía a Samborondón, junto al Banco del PacGuayaquil090150</td>
<td>1</td>
</tr>
<tr>
<td>80000108-1325103415</td>
<td>ECHEVERRIA VIVAR PAOLA MICHEL</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4894638</td>
<td>-0.2091737</td>
<td>Av. Carlos Julio Arosemena y Av. Las MonjGuayaquil09000</td>
<td>1</td>
</tr>
<tr>
<td>8000010A-1325103415</td>
<td>COMERCIO MARSANTOS S.A.</td>
<td>n/a</td>
<td>n/a</td>
<td>n/a</td>
<td>-78.4856262</td>
<td>-0.2091740</td>
<td>   </td>
<td>1</td>
</tr>
</table>
<div id="floating-panel">
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">
</div>
<div id="map_canvas"></div>
<script src="https://maps.google.com/maps/api/js?callback=initMap" async defer></script>

相关内容

最新更新

热门标签：