將列表項目添加到Google地圖

我有一個PHP腳本，可以生成地點列表，我需要將這些地址添加到同一頁面上的Google地圖。儘管有很多在線的教程，但我還是無法找到一個簡單的方法來完成這個任務。我很好奇，想知道是否有一個簡單的JavaScript/PHP的片段來做到這一點......而不是訴諸一個jQuery插件等將列表項目添加到Google地圖

<ul id="myPlaces"> 
<li name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant">Pan Africa Market</li> 
<li name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/>Buddha Bar</li> 
<li name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/>Melting Pot</li> 
</ul>

的谷歌地圖將只包含標記，上面有這些位置。當然這些位置會改變，所以它們不能被硬編碼。

來源

2012-01-02 Zap Rowsdower

簡單的jQuery可以爲你做每個函數。對於代碼示例，你需要一個谷歌地圖對象：

$('#myPlaces li').each(function(index, el) { 

    new google.maps.Marker({ 
     position: new google.maps.LatLng($(el).attr("lat"), $(el).attr("lng")), 
     map: map, 
     title: $(el).attr("name") 
    }); 

});

見數獨更多信息：

在純JS是更多的代碼寫，並且可以使用getElementsByTagName函數完成，您可以在該文檔或子節點上調用該函數：

var i, list, places, place, lat, lng, placeName; 

list = document.getElementById("myPlaces"); 
places = list.getElementsByTagName("li"); 

for (i = 0; i < places.length; i += 1) { 
    place = places[i]; 
    lat = place.getAttribute("lat"); 
    lng = place.getAttribute("lng"); 
    placeName = place.getAttribute("name"); 

    new google.maps.Marker({ 
     position: new google.maps.LatLng(lat, lng), 
     map: map, 
     title: placeName 
    }); 
}

來源

2012-01-02 23:35:52

是的。謝謝。現在有一種方法可以在沒有JQuery的情況下完成。（對JQuery沒有任何反應，在這一點上它更像是一個學術問題。） – 2012-01-03 00:54:54

是的。我更新了答案。 – 2012-01-03 01:33:26

太棒了！謝謝！ – 2012-01-03 01:37:15

Soc首先到達那裏，但是基本上你是這麼做的，但一個建議是讓php用數據生成一個JSON對象並使用它來生成html列表和地圖標記。如果這是一個大網站的一部分，絕對值得這樣做。從HTML獲取地圖的數據通常不是很好的設計。

Google Maps JavaScript API

來源

2012-01-02 23:42:19 eaglestorm

我的目標是在沒有JQuery的情況下做到這一點。（對JQuery沒有任何反應，在這一點上它更像是一個學術問題） – 2012-01-03 00:55:43

你不必使用jQuery，但是你需要使用JavaScript，我通常更喜歡yui3，但是你不需要一個js庫，它只是讓事情更輕鬆。 – eaglestorm 2012-01-03 01:26:26

將列表項目添加到Google地圖

回答

相關問題