Google maps markers удаление маркеров удаляет всю карту
Добрый день!
Я новичок, только учусь. Учусь на основе бесплатных онлайн курсов и материалов. Сейчас делаю одно из заданий, в котором дан код, куда нужно дописать некоторые функции, а именно добавить маркеры в гугл карту и удалить маркеры с карты. Очень прошу помочь мне разобраться - я уже больше недели не могу понять, в чем моя ошибка; все делаю по инструкциям (ссылки на инструкции ниже), но если вводить данные, то 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()); }); } Большое спасибо! |
Ducol, здравствуйте.
По поводу удаления маркеров: почему не сделали, как в примере? Так не работает? function removeMarkers() { for (i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; } |
Цитата:
|
Часовой пояс GMT +3, время: 05:39. |