[英]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.