Добрый день!
Я новичок, только учусь. Учусь на основе бесплатных онлайн курсов и материалов. Сейчас делаю одно из заданий, в котором дан код, куда нужно дописать некоторые функции, а именно добавить маркеры в гугл карту и удалить маркеры с карты. Очень прошу помочь мне разобраться - я уже больше недели не могу понять, в чем моя ошибка; все делаю по инструкциям (ссылки на инструкции ниже), но если вводить данные, то addMarker функция сдвигает карту куда-то в другое место (не то, которое высвечивается при вводе - то есть программа верно находит место в таблице, но addMarker неверно его показывает), а если добавить код функции removeMarkers, то вообще исчезает карта, остается только место для ввода данных.
У меня есть таблица mysql, в которой собраны все места с данными. Когда пользователь вводит, например, индекс, то карта должна показывать это место с маркером на этом месте.
Изучала по
https://developers.google.com/maps/d...ript/examples/
https://developer.mozilla.org/en-US/...vaScript/Guide
http://learn.jquery.com/using-jquery-core/
Ниже весь код файла, который создает карту и маркеры; там как раз есть функции addMarker и removeMarkers.
// Google Map
var map;
// markers for map
var markers = [];
// info window
var info = new google.maps.InfoWindow();
// execute when the DOM is fully loaded
$(function() {
// styles for map
// [url]https://developers.google.com/maps/documentation/javascript/styling[/url]
var styles = [
// hide Google's labels
{
featureType: "all",
elementType: "labels",
stylers: [
{visibility: "off"}
]
},
// hide roads
{
featureType: "road",
elementType: "geometry",
stylers: [
{visibility: "off"}
]
}
];
// options for map
// [url]https://developers.google.com/maps/documentation/javascript/reference#MapOptions[/url]
var options = {
center: {lat: 37.4236, lng: -122.1619}, // Stanford, California
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
maxZoom: 14,
panControl: true,
styles: styles,
zoom: 13,
zoomControl: true
};
// get DOM node in which map will be instantiated
var canvas = $("#map-canvas").get(0);
// instantiate map
map = new google.maps.Map(canvas, options);
// configure UI once Google Map is idle (i.e., loaded)
google.maps.event.addListenerOnce(map, "idle", configure);
});
/**
* Adds marker for place to map.
*/
// ЭТА ФУНКЦИЯ ВЫЗЫВАЕТ ВОПРОСЫ, ПИСАЛА ЕЕ Я
function addMarker(place)
{
// Create a LatLng object representing a geographic point of the marker
var marker_LatLng = new google.maps.LatLng(place.latitude, place.longitude);
// Create a marker
var marker = new MarkerWithLabel({
position: marker_LatLng,
draggable: false,
raiseOnDrag: true,
map: map,
labelContent: place.place_name,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
// Push a marker to markers array
markers.push(marker);
// Add a marker to a map
marker.setMap(map);
}
/**
* Configures application.
*/
function configure()
{
// update UI after map has been dragged
google.maps.event.addListener(map, "dragend", function() {
update();
});
// update UI after zoom level changes
google.maps.event.addListener(map, "zoom_changed", function() {
update();
});
// remove markers whilst dragging
google.maps.event.addListener(map, "dragstart", function() {
removeMarkers();
});
// configure typeahead
// [url]https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md[/url]
$("#q").typeahead({
autoselect: true,
highlight: true,
minLength: 1
},
{
source: search,
templates: {
empty: "no places found yet",
suggestion: _.template("<p><%= postal_code %>, <%= place_name %>, <%= admin_name1 %></p>")
}
});
// re-center map after place is selected from drop-down
$("#q").on("typeahead:selected", function(eventObject, suggestion, name) {
// ensure coordinates are numbers
var latitude = (_.isNumber(suggestion.latitude)) ? suggestion.latitude : parseFloat(suggestion.latitude);
var longitude = (_.isNumber(suggestion.longitude)) ? suggestion.longitude : parseFloat(suggestion.longitude);
// set map's center
map.setCenter({lat: latitude, lng: longitude});
// update UI
update();
});
// hide info window when text box has focus
$("#q").focus(function(eventData) {
hideInfo();
});
// re-enable ctrl- and right-clicking (and thus Inspect Element) on Google Map
// [url]https://chrome.google.com/webstore/detail/allow-right-click/hompjdfbfmmmgflfjdlnkohcplmboaeo?hl=en[/url]
document.addEventListener("contextmenu", function(event) {
event.returnValue = true;
event.stopPropagation && event.stopPropagation();
event.cancelBubble && event.cancelBubble();
}, true);
// update UI
update();
// give focus to text box
$("#q").focus();
}
/**
* Hides info window.
*/
function hideInfo()
{
info.close();
}
/**
* Removes markers from map.
*/
// ЭТА ФУНКЦИЯ ТАКЖЕ СОЗДАЕТ ПРОБЛЕМУ, НАПИСАНА МНОЙ
function removeMarkers()
{
/*for (i = 0; i < markers.length; i++) {
if (markers[i].getMap() != null)
{
markers[i] = [];
markers[i].setMap(null);
}
markers.length = 0;*/
}
/**
* Searches database for typeahead's suggestions.
*/
function search(query, cb)
{
// get places matching query (asynchronously)
var parameters = {
geo: query
};
$.getJSON("search.php", parameters)
.done(function(data, textStatus, jqXHR) {
// call typeahead's callback with search results (i.e., places)
cb(data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
// log error to browser's console
console.log(errorThrown.toString());
});
}
/**
* Shows info window at marker with content.
*/
function showInfo(marker, content)
{
// start div
var div = "<div id='info'>";
if (typeof(content) === "undefined")
{
// [url]http://www.ajaxload.info/[/url]
div += "<img alt='loading' src='img/ajax-loader.gif'/>";
}
else
{
div += content;
}
// end div
div += "</div>";
// set info window's content
info.setContent(div);
// open info window (if not already open)
info.open(map, marker);
}
/**
* Updates UI's markers.
*/
function update()
{
// get map's bounds
var bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
// get places within bounds (asynchronously)
var parameters = {
ne: ne.lat() + "," + ne.lng(),
q: $("#q").val(),
sw: sw.lat() + "," + sw.lng()
};
$.getJSON("update.php", parameters)
.done(function(data, textStatus, jqXHR) {
// remove old markers from map
removeMarkers();
// add new markers to map
for (var i = 0; i < data.length; i++)
{
addMarker(data[i]);
}
})
.fail(function(jqXHR, textStatus, errorThrown) {
// log error to browser's console
console.log(errorThrown.toString());
});
}
Большое спасибо!
