我需要帮助，我尝试使用GMap API v3进行电机搜索。我用一个数组测试代码到标记，但是当我尝试使用我的mysql数据库中的标记进行测试时，应用程序失败了，当移动markeruser时没有一个赞助人失败。这是带有标记数组的代码。
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style>
html,
body,
#map {
height: 90%;
width: 90%;
margin: 0px;
padding: 0px
} </style> </head> <div class='titular'> (Motor Busqueda)</div> <body onload="init()">
<div id="map"></div>
<script>
var map, searchArea, searchAreaMarker, searchAreaRadius = 1000, // metres startLat = 40.782827, startLng = -73.966167;
function init() { var startLatLng = new google.maps.LatLng(startLat, startLng);
map = new google.maps.Map(document.getElementById('map'), {
center: startLatLng,
zoom: 15 });
searchArea = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map,
center: startLatLng,
radius: searchAreaRadius });
searchAreaMarker = new google.maps.Marker({
position: startLatLng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
title: 'searchAreaMarker' });
var randomMarkers = [{
title: 'Marker 1',
latLng: new google.maps.LatLng(40.770088, -73.971146) }, {
title: 'Marker 2',
latLng: new google.maps.LatLng(40.782048, -73.972691) }, {
title: 'Marker 3',
latLng: new google.maps.LatLng(40.769048, -73.987797) }, {
title: 'Marker 4',
latLng: new google.maps.LatLng(40.773858, -73.956211) }, {
title: 'Marker 5',
latLng: new google.maps.LatLng(40.800372, -73.952091) }, {
title: 'Marker 6',
latLng: new google.maps.LatLng(40.804661, -73.939388) }];
for (var i = 0; i < randomMarkers.length; i++) {
randomMarkers[i].marker = new google.maps.Marker({
position: randomMarkers[i].latLng,
map: map,
title: randomMarkers[i].title
}); }
google.maps.event.addListener(searchAreaMarker, 'dragend', function(e) {
startLatLng = e.latLng;
searchArea.setOptions({
center: startLatLng
});
map.panTo(searchAreaMarker.getPosition());
// find markers in area
for (var i = 0; i < randomMarkers.length; i++) {
// ---------- Here comes the error:
// TypeError: e is undefined
if (google.maps.geometry.spherical.computeDistanceBetween(randomMarkers[i].marker.getPosition(), searchArea.getCenter()) <= searchArea.getRadius()) {
randomMarkers[i].marker.setMap(map); } else {
randomMarkers[i].marker.setMap(null);
}
} }); }
google.maps.event.addDomListener(window, 'load', init);
</script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLUQx80thnYElakuZ6sIFt4vWYR6kE4Ss&callback=" async defer></script> </body> </html>
和另一个我的db中的标记：
function load() {
var markers = [];
var circle = null;
var startLatLng;
var point;
//----------------Declaracion de variable latlng--------------------
var latlng = new google.maps.LatLng(4.678402871749015,-74.09417855941774);
//----------------Inicializar Mapa--------------------------
var map = new google.maps.Map(document.getElementById("map"), {
center: latlng,
zoom: 14,
mapTypeId: 'roadmap'
});
//----------------Declaracion variable infowindow--------------------
var infoWindow = new google.maps.InfoWindow;
//----------------Marcadores de BD--------------------
downloadUrl("php/markers.php", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var icon = 'gal/marker.png';
var markers[i].marker = new google.maps.Marker({
map: map,
position: point,
animation: google.maps.Animation.DROP,
icon: icon,
id: id
}); // End Marker
} // End for
//-----------Marcador Usuario-------------------
var markeruser = new google.maps.Marker({
position: latlng,
map: map,
title:"Esto es un marcador",
draggable: true,
animation: google.maps.Animation.DROP
});
//-----------Circulo de area---------------------
var circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
radius: Math.sqrt(1000) * 15
});
//-----------Enlazar marcador y circle--------------
circle.bindTo('center', markeruser, 'position');
//-----------------Search-----------------------------
google.maps.event.addListener(markeruser, 'draggend', function(e) {
startLatLng = e.latLng;
circle.setOptions({
center: startLatLng
});
map.panTo(markeruser.getPosition());
// find markers in area
searchWithinMarker();
});//End function
});// End dowload
document.getElementById('show-listings').addEventListener('click', showListings);
document.getElementById('hide-listings').addEventListener('click', hideListings);
} // End Load Map
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function searchWithinMarker(){
// find markers in area
for (var i = 0; i < markers.length; i++) {
if (google.maps.geometry.spherical.computeDistanceBetween(markers[i].marker.getPosition(), circle.getCenter()) <= circle.getRadius()) {
markers[i].marker.setMap(map);
} else {
markers[i].marker.setMap(null);
}//End If
}//End For
}
function showListings() {
var bounds = new google.maps.LatLngBounds();
// Extend the boundaries of the map for each marker and display the marker
for (var i = 0; i < markers.length; i++) {
markers[i].marker.setMap(map);
bounds.extend(markers[i].marker.position);
}
map.fitBounds(bounds);
}
// This function will loop through the listings and hide them all.
function hideListings() {
for (var i = 0; i < markers.length; i++) {
markers[i].marker.setMap(null);
}
}
function doNothing() {}
html是：
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/estilos.css" rel="stylesheet">
<script type="text/javascript" src="js/myscript.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLUQx80thnYElakuZ6sIFt4vWYR6kE4Ss&callback=initMap"
async defer></script>
</head>
<div class='titular'>Coffee Search (Motor Busqueda)</div>
<body onload="initMap()">
<div id="map"></div>
</body>
</html>
css是：
body {
margin-top:3%;
margin-left:5%;
background: #cccccc;
}
#info {
font-size: 18px;
background: #ffffff;
width: 350px;
border-radius: 6px;
text-align: center;
color: #666666;
border: solid 1px #666666;
margin: auto;
padding: 3px;
}
#enviar {
background: #fff;
font-size: 22px;
text-align: left;
color: #000;
margin: 10px 60px;
padding:3px 10px 3px 10px;
border-radius: 6px;
}
#respuesta {
margin: auto 60px;
}
#googleMap {
margin: 10px auto;
width:90%;
height:280px;
border: 2px solid #666666;
border-radius: 6px;
}
#map {
margin: 10px auto;
width:90%;
height:280px;
border: 2px solid #666666;
border-radius: 6px;
}
.titular {
background: #ffffff;
font-size: 32px;
color: #000;
margin: 40px auto;
text-align: center;
width: 50%;
padding:3px 10px 3px 10px;
border-radius: 6px;
border: solid 1px #999999;
}
maker.php是：
<?php
header('Content-Type: text/xml');
echo '<markers>';
include ("conexion.php");
$sql=mysqli_query($con,"select * from reg ORDER BY Id");
while($row=mysqli_fetch_array($sql))
{
echo "<marker id ='".$row['Id']."' lat='".$row['Lat']."' lng='".$row['Lng']."'>\n";
echo "</marker>\n";
}
mysql_close($bd);
echo "</markers>\n";
?>
sql db是：
-- phpMyAdmin SQL Dump
-- version 3.5.1
-- http://www.phpmyadmin.net
--
-- Servidor: localhost
-- Tiempo de generación: 10-08-2017 a las 19:40:25
-- Versión del servidor: 5.5.24-log
-- Versión de PHP: 5.4.3
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Base de datos: `marcadores`
--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `reg`
--
CREATE TABLE IF NOT EXISTS `reg` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`Lat` varchar(50) NOT NULL DEFAULT '4.678402871749015',
`Lng` varchar(50) NOT NULL DEFAULT '-74.09417855941774',
`Pos` varchar(256) NOT NULL,
PRIMARY KEY (`Id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=20 ;
--
-- Volcado de datos para la tabla `reg`
--
INSERT INTO `reg` (`Id`, `Lat`, `Lng`, `Pos`) VALUES
(1, '', '', ','),
(2, '4.678413564838687', '-74.09585225784303', '4.678413564838687,-74.09585225784303'),
(3, '4.679450793759737', '-74.09475791656496', '4.679450793759737,-74.09475791656496'),
(4, '4.68088366417397', '-74.09359920227052', '4.68088366417397,-74.09359920227052'),
(5, '4.678680892027193', '-74.09398544036867', '4.678680892027193,-74.09398544036867'),
(6, '4.677526037840907', '-74.09481156074526', '4.677526037840907,-74.09481156074526'),
(7, '4.676178705549802', '-74.09496176445009', '4.676178705549802,-74.09496176445009'),
(13, '4.680113764017544', '-74.09057367050173', '4.680113764017544,-74.09057367050173'),
(14, '4.682423461945482', '-74.09572351181032', '4.682423461945482,-74.09572351181032'),
(15, '4.680199308521195', '-74.098727585907', '4.680199308521195,-74.098727585907'),
(16, '4.677290789532407', '-74.10070169174196', '4.677290789532407,-74.10070169174196'),
(17, '4.673954532288243', '-74.09804094039919', '4.673954532288243,-74.09804094039919'),
(18, '4.672842443010129', '-74.09314859115602', '4.672842443010129,-74.09314859115602'),
(19, '4.676691975299647', '-74.09675348007204', '4.676691975299647,-74.09675348007204');
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
这是来自控制台
的错误信息