Приемник событий карт Google для кругов в массиве; в чем дело? - PullRequest
Новая
       3

Приемник событий карт Google для кругов в массиве; в чем дело?

0 голосов
/ 06 мая 2018

Как видно из заголовка, прослушиватель событий не работает и нет ошибок в консоли, кто-нибудь знает, что не так с моим кодом?

Я пытаюсь добавить круги для каждого объекта в JSON, который выглядит следующим образом (извините за неформатированный JSON, сделал это, чтобы сэкономить место) 

[
    {
        "zoneTitle": "Zone1",
        "zoneLat": 57.704468,
        "zoneLng": 11.96499,
        "challengesInZone": [
            {
                "challengeId": "1",
                "challengeTitle": "CHALLENGE TITLE: Seek the unknown!",
                "challengeContent": "CHALLENGE CONTENT: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id nisi eu leo placerat consectetur. Ut congue ut tellus eu tempor. Curabitur rutrum enim vel elit mattis, vel aliquet tellus congue. Nunc a commodo ex. In hac habitasse platea dictumst. Vestibulum a blandit orci. Suspendisse lobortis ac nisl quis tristique.",
                "challengeAnswer": null,
                "challengeStartDate": "2018-05-01 11:45:00",
                "challengeEndDate": "2018-09-30 12:00:00",
                "challengeLat": 57.704942,
                "challengeLng": 11.963954,
                "challengeImageUrl": null,
                "rewardTitle": null,
                "rewardImageUrl": null,
                "rewardContent": null,
                "rewardActiveFrom": null,
                "rewardActiveTo": null,
                "rewardSupplierTitle": null,
                "rewardLat": 0,
                "rewardLng": 0
            },
            {
                "challengeId": "2",
                "challengeTitle": "CHALLENGE TITLE: We are the new old!",
                "challengeContent": "CHALLENGE CONTENT: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id nisi eu leo placerat consectetur. Ut congue ut tellus eu tempor. Curabitur rutrum enim vel elit mattis, vel aliquet tellus congue. Nunc a commodo ex. In hac habitasse platea dictumst. Vestibulum a blandit orci. Suspendisse lobortis ac nisl quis tristique.",
                "challengeAnswer": null,
                "challengeStartDate": "2018-05-01 11:45:00",
                "challengeEndDate": "2018-09-30 12:00:00",
                "challengeLat": 57.70362,
                "challengeLng": 11.968133,
                "challengeImageUrl": null,
                "rewardTitle": null,
                "rewardImageUrl": null,
                "rewardContent": null,
                "rewardActiveFrom": null,
                "rewardActiveTo": null,
                "rewardSupplierTitle": null,
                "rewardLat": 0,
                "rewardLng": 0
            },
            {
                "challengeId": "3",
                "challengeTitle": "CHALLENGE TITLE: Ship the lipstick!",
                "challengeContent": "CHALLENGE CONTENT: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id nisi eu leo placerat consectetur. Ut congue ut tellus eu tempor. Curabitur rutrum enim vel elit mattis, vel aliquet tellus congue. Nunc a commodo ex. In hac habitasse platea dictumst. Vestibulum a blandit orci. Suspendisse lobortis ac nisl quis tristique.",
                "challengeAnswer": null,
                "challengeStartDate": "2018-05-01 11:45:00",
                "challengeEndDate": "2018-09-30 12:00:00",
                "challengeLat": 57.705912,
                "challengeLng": 11.959035,
                "challengeImageUrl": null,
                "rewardTitle": null,
                "rewardImageUrl": null,
                "rewardContent": null,
                "rewardActiveFrom": null,
                "rewardActiveTo": null,
                "rewardSupplierTitle": null,
                "rewardLat": 0,
                "rewardLng": 0
            }
        ]
    },
    {
        "zoneTitle": "Zone2",
        "zoneLat": 57.707263,
        "zoneLng": 11.934827,
        "challengesInZone": [
            {
                "challengeId": "4",
                "challengeTitle": "CHALLENGE TITLE: Castle on the hill!",
                "challengeContent": "CHALLENGE CONTENT: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id nisi eu leo placerat consectetur. Ut congue ut tellus eu tempor. Curabitur rutrum enim vel elit mattis, vel aliquet tellus congue. Nunc a commodo ex. In hac habitasse platea dictumst. Vestibulum a blandit orci. Suspendisse lobortis ac nisl quis tristique.",
                "challengeAnswer": null,
                "challengeStartDate": "2018-05-01 11:45:00",
                "challengeEndDate": "2018-09-30 12:00:00",
                "challengeLat": 57.704419,
                "challengeLng": 11.929499,
                "challengeImageUrl": null,
                "rewardTitle": null,
                "rewardImageUrl": null,
                "rewardContent": null,
                "rewardActiveFrom": null,
                "rewardActiveTo": null,
                "rewardSupplierTitle": null,
                "rewardLat": 0,
                "rewardLng": 0
            },
            {
                "challengeId": "5",
                "challengeTitle": "CHALLENGE TITLE: One mountain one view!",
                "challengeContent": "CHALLENGE CONTENT: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id nisi eu leo placerat consectetur. Ut congue ut tellus eu tempor. Curabitur rutrum enim vel elit mattis, vel aliquet tellus congue. Nunc a commodo ex. In hac habitasse platea dictumst. Vestibulum a blandit orci. Suspendisse lobortis ac nisl quis tristique.",
                "challengeAnswer": null,
                "challengeStartDate": "2018-05-01 11:45:00",
                "challengeEndDate": "2018-09-30 12:00:00",
                "challengeLat": 57.713382,
                "challengeLng": 11.937009,
                "challengeImageUrl": null,
                "rewardTitle": null,
                "rewardImageUrl": null,
                "rewardContent": null,
                "rewardActiveFrom": null,
                "rewardActiveTo": null,
                "rewardSupplierTitle": null,
                "rewardLat": 0,
                "rewardLng": 0
            },
            {
                "challengeId": "6",
                "challengeTitle": "CHALLENGE TITLE: Dock!",
                "challengeContent": "CHALLENGE CONTENT: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id nisi eu leo placerat consectetur. Ut congue ut tellus eu tempor. Curabitur rutrum enim vel elit mattis, vel aliquet tellus congue. Nunc a commodo ex. In hac habitasse platea dictumst. Vestibulum a blandit orci. Suspendisse lobortis ac nisl quis tristique.",
                "challengeAnswer": null,
                "challengeStartDate": "2018-05-01 11:45:00",
                "challengeEndDate": "2018-09-30 12:00:00",
                "challengeLat": 57.710148,
                "challengeLng": 11.950656,
                "challengeImageUrl": null,
                "rewardTitle": null,
                "rewardImageUrl": null,
                "rewardContent": null,
                "rewardActiveFrom": null,
                "rewardActiveTo": null,
                "rewardSupplierTitle": null,
                "rewardLat": 0,
                "rewardLng": 0
            }
        ]
    }
]





var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var circle;
var circles = [];
var start = { lat: 57.694139, lng: 11.918750 };
var infos = [];

function initMap() {
mapProp = {
    zoom: 13,
    center: start,
    mapTypeId: 'terrain'
};

map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
    content: "hello world"
});
}

function addMarker(lat, lng) {
marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map
});
markers.push(marker);
};

$(document).ready(function () {
url = 'https://localhost:44356/challenge/';
$.getJSON(url, function (data) {
    $.each(data, function (i, field) {
        var infoContent = 'BLABLA';
        var info = new google.maps.InfoWindow({
            content: infoContent,
            maxWidth: 230
        });
        infos.push(info);
        if (field.zoneTitle) {
            circle = new google.maps.Circle({
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: new google.maps.LatLng(field.zoneLat,
                    field.zoneLng),
                radius: Math.sqrt(field.challengesInZone.length) * 400,
                title: 'Click to zoom'
            });
            circles.push(circle);
        } else {
            console.log("Missing location for this data item");
        }
    });
});

var listeners = function (i) {
    for (var zone in circles) {
        zone.addListener(zone[i], 'click', function () {
            infos[i].open(map, zone[i]);
            zone[i].setMap(map);
            console.log("hej");
        });
    }
    listeners(i);
};
});

1 Ответ

0 голосов
/ 06 мая 2018

Сделано, вот так:) 

    var map;
    var mapProp;
    var url;
    var marker;
    var markers = [];
    var infoWindow;
    var circle;
    var circles = [];
    var start = { lat: 57.694139, lng: 11.918750 };
    var infos = [];

    function initMap() {
        mapProp = {
            zoom: 13,
            center: start,
            mapTypeId: 'terrain'
        };
        map = new google.maps.Map(document.getElementById("map"), mapProp);
        infoWindow = new google.maps.InfoWindow({
            content: "hello world"
        });
    }

    function addMarker(lat, lng) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map
        });
        markers.push(marker);
    }

    function listeners(i) {
        i.addListener('click', function () {
            map.setZoom(16);
            map.setCenter(i.getCenter());
            i.setMap(map);
            console.log("hej");
        });
    }

    $(document).ready(function () {
        url = 'https://localhost:44356/challenge/';
        $.getJSON(url, function (data) {
            $.each(data, function (i, field) {

                if (field.zoneTitle) {
                    circles.push(new google.maps.Circle({
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35,
                        map: map,
                        center: new google.maps.LatLng(field.zoneLat,
                            field.zoneLng),
                        radius: Math.sqrt(field.challengesInZone.length) * 400,
                        title: 'Click to zoom'
                    }));
                    listeners(circles[i]);
                } else {
                    console.log("Missing location for this data item");
                }
            });
        });
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...