将列表项添加到Google地图

时间:2012-01-02 22:24:34

标签: php javascript google-maps

我有一个生成地点列表的PHP脚本,我需要将它们添加到同一页面上的Google地图中。尽管在线有许多教程,但我还是找不到直接的方法。我很想知道是否有一个简单的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地图只会包含带有这些位置的标记。当然,位置会发生变化,因此无法进行硬编码。

2 个答案:

答案 0 :(得分:2)

普通的jQuery可以使用每个函数为您完成此操作。对于代码示例,您需要一个Google地图对象:

$('#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:

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

答案 1 :(得分:0)

Soc首先到达那里但是基本上你是如何做到的,但是一个建议是让php生成一个带有数据的JSON对象,并用它来生成html列表和地图的标记。如果这是一个大型网站的一部分绝对值得这样做。从HTML中抓取地图数据通常不是一个好的设计。

Google Maps JavaScript API