Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.09.2016, 19:28
Новичок на форуме
Отправить личное сообщение для Ducol Посмотреть профиль Найти все сообщения от Ducol
 
Регистрация: 01.09.2016
Сообщений: 3

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());
     });
}

Большое спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2016, 11:16
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

Ducol, здравствуйте.
По поводу удаления маркеров: почему не сделали, как в примере?
Так не работает?
function removeMarkers() 
{
  for (i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2016, 12:06
Новичок на форуме
Отправить личное сообщение для Ducol Посмотреть профиль Найти все сообщения от Ducol
 
Регистрация: 01.09.2016
Сообщений: 3

Сообщение от Manyasha Посмотреть сообщение
Ducol, здравствуйте.
По поводу удаления маркеров: почему не сделали, как в примере?
Так не работает?
function removeMarkers() 
{
  for (i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}
Спасибо. Да, делала и так тоже. Тот же эффект. Не понимаю, почему. Вроде бы все сделала по инструкции.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое размещение маркеров на Google maps greck6 Events/DOM/Window 7 30.08.2016 11:52
google maps api - перезатирается event "click" для маркеров shurik_shink Общие вопросы Javascript 6 26.04.2016 14:49
Приближение при клике на маркер Google Maps pifon Общие вопросы Javascript 5 06.11.2015 21:02
Google Maps - ищется алгоритм обхода ремонтных участков дорог stankhat Оффтопик 0 06.02.2015 17:12
Как сделать карту, похожую на Google Maps? QRV (X)HTML/CSS 2 30.10.2012 12:58