簡體   English   中英

設置每個標記Google Maps的內容

[英]Setting the content for each marker Google Maps

需要快速幫助來設置我要創建的每個標記的內容

我正在遍歷保存每個標記(locationObj)的Lat,Lng的Location Obj,每個標記的內容已由其他對象(PermutationObj)保留。

例:

 locationObj-- > {"Lat":"34.163291","Lng":"-118.685123"} etc....

 PermutationObj -- > ElectronicPopContent,LocationName 

關鍵是我要獲取在地圖上顯示的所有標記的第一個內容和位置名稱(來自PermutationObj)。

我該如何解決???

JS代碼:

var locationObj;
        var PermutationObj;
        var map;
        var mapOptions;

        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18, 1],
            type: 'poly'
        };





      function setMap(locationList, permutation) {
            // List of Lat,Lng
            locationObj = $.parseJSON(locationList);
            PermutationObj = $.parseJSON(permutation);


            var qMapTypeId = google.maps.MapTypeId.SATELLITE
            var LatLngCenter = new google.maps.LatLng(34.163291, -118.685123);
            var mapOptions = {
                zoom: 4,
                center: LatLngCenter,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                }
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var bounds = new google.maps.LatLngBounds();
            for (i in locationObj) {
                var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]);

                bounds.extend(LatLngPair);
                map.fitBounds(bounds);


//                for (j in PermutationObj) {
//                    //  var image = PropObj[j]["ElectroincImageURL"];
//                    var content = PermutationObj[j]["ElectronicPopContent"];
//                    break
//                }

                var content = PermutationObj[i]["ElectronicPopContent"];

                marker = new google.maps.Marker({
                    position: LatLngPair,
                    map: map,
                    draggable: false,
                    //                    icon: image,
                    shape: shape,
                    anchorPoint: new google.maps.Point(12, -25)

                });

                //Setting up the content of the info window dynamic wise.
                var infowindow = new google.maps.InfoWindow({
                    content: content
                });



                //Setting up an event listener, When the user clicks the marker, an info window opens.
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                });
            }
        }

更改了幾件事,第一個是只有一個InfoWindow實例,另一個是將內容存儲為標記屬性,並在單擊時使用它,最后一個是通過使用var marker = ...每個標記創建一個實例marker = ...讓我知道這是否適合您。

var locationObj;
var PermutationObj;
var map;
var mapOptions;
var infowindow = new google.maps.InfoWindow({ });

var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
};

function setMap(locationList, permutation) {
    // List of Lat,Lng
    locationObj = $.parseJSON(locationList);
    PermutationObj = $.parseJSON(permutation);


    var qMapTypeId = google.maps.MapTypeId.SATELLITE
    var LatLngCenter = new google.maps.LatLng(34.163291, -118.685123);
    var mapOptions = {
            zoom: 4,
            center: LatLngCenter,
            mapTypeControl: true,
            mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var bounds = new google.maps.LatLngBounds();
    for (i in locationObj) {
        var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]);

        //Are you sure you need these 2 lines here?
        bounds.extend(LatLngPair);
        map.fitBounds(bounds);

        var marker = new google.maps.Marker({
            position: LatLngPair,
            map: map,
            draggable: false,
            shape: shape,
            anchorPoint: new google.maps.Point(12, -25),
            infoWindowContent: PermutationObj[i]["ElectronicPopContent"]

        });

        //Setting up an event listener, When the user clicks the marker, an info window opens.
        google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(marker.infoWindowContent);
                infowindow.open(map, marker);
        });
    }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM