Проблема с моим событием нажатия на интеграцию с GoogleMaps - извлечение данных из файла JSON - PullRequest
Новая
       28

Проблема с моим событием нажатия на интеграцию с GoogleMaps - извлечение данных из файла JSON

0 голосов
/ 07 сентября 2011

GoogleMaps интегрированы в мой сайт.У меня проблема с переносом моей информации из моего JSON-файла в информационное окно при нажатии маркеров.

Ниже приведен мой текущий код: 

/*********** Custom GoogleMaps functions ***********/

if (document.getElementById("events-map")) {

    // set json path
    var markerFile = '/scripts/json/find-events.json';

    // set default map properties
    var defaultLatlng = new google.maps.LatLng(41.4925, -99.9018);

    // zoom level of the map        
    var defaultZoom = 4;

    // variable for map
    var map;

    // variable for marker info window
    var infowindow;

    // List with all marker to check if exist
    var markerList = {};

    // option for google map object
    var myOptions = {
        zoom: defaultZoom,
        center: defaultLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }


    /**
     * Load Map
     */
    function loadMap() {

        // create new map make sure a DIV with id myMap exist on page
        map = new google.maps.Map(document.getElementById("events-map"), myOptions);

        // create new info window for marker detail pop-up
        infowindow = new google.maps.InfoWindow();

        // load markers
        loadMarkers();
    }


    /**
     * Load markers via ajax request from server
     */
    function loadMarkers() {

        // load marker jSon data        
        $.getJSON(markerFile, function(data) {

            // loop all the markers
            $.each(data, function(i, item) {

                // add marker to map
                loadMarker(item);

            });
        });
    }

    /**
     * Load marker to map
     */
    function loadMarker(makerData) {

        // create new marker location
        var myLatlng = new google.maps.LatLng(markerData['xCoordinate'], markerData['yCoordinate']);

        // create new marker                
        var marker = new google.maps.Marker({
            id: markerData['id'],
            map: map,
            title: markerData['propertyName'] ,
            position: myLatlng

        });

        // add marker to list used later to get content and additional marker information
        markerList[marker.id] = marker;

        // add event listener when marker is clicked
        // currently the marker data contain a dataurl field this can of course be done different
        google.maps.event.addListener(marker, 'click', function() {

            // show marker when clicked
            showMarker(marker.id);

        });

        // add event when marker window is closed to reset map location
        google.maps.event.addListener(infowindow, 'closeclick', function() {
            map.setCenter(defaultLatlng);
            map.setZoom(defaultZoom);
        });
    }

    /**
     * Show marker info window
     */
    function showMarker(markerId) {

        // get marker information from marker list
        var marker = markerList[markerId];

        // check if marker was found
        if (marker) {
            // get marker detail information from server
            $.getJSON(markerFile, function(data) {
                // show marker window
                infowindow.setContent(data);
                infowindow.open(map, marker);
            });
        } else {
            alert('Error marker not found: ' + markerId);
        }
    }


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

содержится в моем файле JSON: 

{
"markers":[
    {

        "id":"1",
        "xCoordinate" : 34.048928,
        "yCoordinate" : -111.093731,
        "propertyName" : "Arizona",
        "propertyState" : "AZ",
        "propertyPhone" : "777.777.7777",
        "propertyEmail" : "test@example.com"
    },
    {
        "id":"2",
        "xCoordinate" : 38.582526,
        "yCoordinate" : -92.510376,
        "propertyName" : "Missouri",
        "propertyState" : "MO",
        "propertyPhone" : "777.777.7777",
        "propertyEmail" : "test@example.com"
    }
]
}

Ответы [ 2 ]

1 голос
/ 08 сентября 2011

В 

var marker = ...
$.getJSON(markerFile, function(data) {...marker...}

function(data) - это обратный вызов, который вызывается асинхронно, когда возвращается результат соответствующего вызова AJAX.В этот момент локальная переменная marker больше не находится в области видимости.Вы должны применить закрытие над маркером: 

$.getJSON(markerFile, function(mapMarker) {
    var m = mapMarker; // save the current marker in the closure
    return function(data) {  // return the required callback ...
        // show marker window
        infowindow.setContent(data);
        infowindow.open(map, m);
    } (marker)               // ... applied to marker
});
1 голос
/ 08 сентября 2011

В функции loadMarker есть опечатка:

makerData должно быть markerData

...