顯示多個標記在陣列 - 谷歌地圖API

如何清潔這使得代碼處理多個列表更好？我已經看到了一些代碼示例，可以從數組中獲取標記信息，但我似乎無法使其工作。顯示多個標記在陣列 - 谷歌地圖API

的標記需要有「圖標：」，「URL」和「標題：」屬性。「圖標：」，所以我可以更改每個標記外觀，「網址：」指向專用於每個標記的頁面和「標題」，只是在懸停時添加標記名稱。

我還需要在腳本中的數組，因爲我不是從數據庫或類似的東西收集它。

我很綠色，當涉及到JavaScript和谷歌地圖API，任何幫助，將不勝感激。

function createMap(lat, lng, zoomVal) { 
var mapOptions = { center: new google.maps.LatLng(lat, lng),  
zoom: zoomVal, 
scrollwheel: false, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 


var myLatlnglow = new google.maps.LatLng(23.654332,-79.387867); 

var markerlow1 = new google.maps.Marker({ 
    position: myLatlnglow, 
    icon: 'images/map-dot.png', 
    map: map, 
    url: '#', 
    title: 'Name' 
}); 
google.maps.event.addListener(markerlow1, 'click', function() { 
window.location.href = markerlow1.url; 
}); 


var myLatlnglow = new google.maps.LatLng(23.688458,-79.300619); 

var markerlow = new google.maps.Marker({ 
    position: myLatlnglow, 
    icon: 'images/map-dot.png', 
    map: map, 
    url: '#', 
    title: 'Name' 
}); 
google.maps.event.addListener(markerlow, 'click', function() { 
window.location.href = markerlow.url; 
}); 


} 

var map; 
function initialize() { 
createMap(23.668493, -29.410812,12); 
    if(navigator.geolocation) { 
    success = function(position) {  
createMap(position.coords.latitude, position.coords.longitude,13); 
}; 
error = function() { 
createMap(23.648493, -29.410812,12); 
}  
navigator.geolocation.getCurrentPosition(success, error); 
} 
}

來源

2012-07-14 Be Right Bacon

有許多方法來創建和組織標記。爲了量身定製的答案，解釋你的數據是如何組織的，以及你希望如何操縱它們。輸入數據格式如何？你打算直接在JavaScript中輸入標記數據還是從外部來源如數據庫或JSON源中提取數據？ – 2012-07-14 21:02:00

@MaryAnne感謝您的回覆，不知道我是否適當地編輯我的問題，但我想直接在JavaScript進入標記數據。我知道爲了優化的緣故，我應該使用某種表或數據庫，但我對數據庫感到恐懼。 – 2012-07-14 22:30:08

如果我是你，我會爲了可讀性而創建對象的對象。如果你必須有效率，並要節省空間和類型，以及陣列替換對象，並通過索引地址數據（0,1,2 ......）

這裏的a demo

// inside function createMap(...) 
     ... 
    markerData = { 
     bing: { 
      lat: 23.654332, 
      lng: -79.387867, 
      icon: "http://labs.google.com/ridefinder/images/mm_20_red.png", 
      url: "http://www.bing.com/", 
      title: "some search engine" 
     }, 
     yahoo: { 
      lat: 23.688458, 
      lng: -79.300619, 
      icon: "http://labs.google.com/ridefinder/images/mm_20_blue.png", 
      url: "http://www.yahoo.com/", 
      title: "Great free games" 
     } 
    }; 

    for (markerId in markerData) { 
     markers[markerId] = createMarker(markerData[markerId]); 
    } 

    markers['bing'].setTitle("new title"); 
} 

function createMarker(data) { 
    var myLatLng = new google.maps.LatLng(data.lat, data.lng); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     icon: data.icon, 
     map: map, 
     title: data.title 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     window.location.href = data.url; 
    }); 

    return marker; 
}

它還應該稍後幫助保存對創建的標記的引用，我使用全局對象markers和相同的ID。

var map; 
var markers = {};

如果以後需要通過markers更改標記屬性可被訪問。

markers['bing'].setTitle("new title");

來源

2012-07-14 23:37:33

顯示多個標記在陣列 - 谷歌地圖API

回答

相關問題