mysql — API GoogleMaps + база данных SQL + точки рендеринга Переполнение стека

Question

mysql — API GoogleMaps + база данных SQL + точки рендеринга Переполнение стека

Я работаю над проектом, в котором пользователи могут заполнить форму для подачи в базу данных SQL, а затем отобразить входные данные на карте.

Я уже заполнил форму, часть базы данных и большую часть карты. Основываясь на документации API Карт Google, я смог отобразить карту с точками моей базы данных, поэтому я знаю, что скрипт PHP, который «читает базу данных», является правильным.

Теперь проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь интегрировать часть кода (вывод, поступающий из базы данных) в другие мои сценарии (геолокация, стилизация карты), он больше не работает (карта отображается, но не точки из базы данных, тогда как, если я попробую пример HTML оттуда https://developers.google.com/maps/articles/phpsqlajax_v3#custom-icons Я могу видеть точки из моей базы данных.

<!-- 3) Map creation -->
<script>

var map;
function initialize() {
var mapOptions = {
zoom: 17,
styles: [{"stylers":[{"hue":"#16a085"},{"saturation":0}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]}]
};
map = new google.maps.Map(document.getElementById('googlemaps'),
mapOptions);

// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);

var contentString = '<div id="infowindow">Vous êtes ici :-)</div>'

var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: contentString
});

map.setCenter(pos);
map.setZoom(17);
}, function() {
handleNoGeolocation(true);
});

// PHP file to render the data from sql
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}

else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}

function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

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 doNothing() {}google.maps.event.addDomListener(window, 'load', initialize);
</script>

Не могли бы вы дать мне знать, что не так с моим сценарием?

Большое спасибо за вашу помощь

0

google-maps mysql php rendering

Решение

По вопросам рекламы [email protected]

Accepted Answer

Я получаю сообщение об ошибке JavaScript с опубликованным кодом Uncaught ReferenceError: customIcons is not defined

Если вам не нужны пользовательские значки, удалите код, который зависит от них:

 // var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
// icon: icon.icon
});

И ошибка JavaScript: Uncaught ReferenceError: infoWindow is not defined

Javascript чувствителен к регистру, infoWindow и infowindow — это разные вещи, вы не определяете переменную infoWindow, которую передаете в вызов bindInfoWindow,

bindInfoWindow(marker, map, infoWindow, html);

должно быть:

bindInfoWindow(marker, map, infowindow, html);

доказательство концепции скрипки

фрагмент кода:

 var map;

function initialize() {
var mapOptions = {
zoom: 17,
styles: [{
"stylers": [{
"hue": "#16a085"}, {
"saturation": 0
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"lightness": 100
}, {
"visibility": "simplified"}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"}]
}]
};
map = new google.maps.Map(document.getElementById('googlemaps'),
mapOptions);

// Try HTML5 geolocation
/* if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
*/
var pos = new google.maps.LatLng(42, -72);
var contentString = '<div id="infowindow">Vous êtes ici :-)</div>'

var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: contentString
});

map.setCenter(pos);
map.setZoom(2);
/*}, function() {
handleNoGeolocation(true);
}); */

// PHP file to render the data from sql
// downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = parseXml(xmlData); // data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
// var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
// icon: icon.icon
});
bindInfoWindow(marker, map, infowindow, html);
}
// });
/*    } else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
*/
}

var xmlData = '<markers><marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant" /><marker name="Buddha Thai &amp; Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar" /><marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant" /><marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant" /><marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar" /><marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant" /><marker name="Mama&amp;apos;s Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976" lng="-122.345467" type="bar" /><marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar" /><marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant" /></markers>';

function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

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 doNothing() {}

function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('MicrosoftXMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
};

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#googlemaps {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googlemaps"></div>

0

Другие решения

Других решений пока нет …

Источник