php - 将列表项添加到 Google map

Question

我有一个 PHP 脚本，可以生成位置列表，我需要将它们添加到同一页面上的 Google map 中。尽管网上有很多教程，但我一直无法找到一种简单的方法来做到这一点。我很好奇是否有一个简单的 javascript/php 代码片段可以做到这一点...而无需求助于 JQuery 插件等。

<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>

Google map 将仅包含带有这些位置的标记。当然，位置会发生变化，因此不能对其进行硬编码。

Answer 1

普通 jQuery 可以使用each 函数为您完成此操作。对于代码示例，您需要一个谷歌地图对象:

$('#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")
    });

});

查看 doku 了解更多信息:

• http://api.jquery.com/each
• http://code.google.com/intl/en-EN/apis/maps/documentation/javascript/reference.html#Marker

在普通 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
    });
}