Javascript 在谷歌地图上放置多个标记_Javascript_Jquery_Google Maps

Javascript 在谷歌地图上放置多个标记

javascript jquery google-maps

Javascript 在谷歌地图上放置多个标记,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,我是JS方面的一个新手，我正在尝试循环遍历节点的一些坐标，并将其放在Google地图上这是我的密码 var lis = document.getElementById("showNames").getElementsByTagName("li"); var lat = document.getElementById("showLat").getElementsByTagName("li"); var lng = document.getElementById("showLng").getEle

我是JS方面的一个新手，我正在尝试循环遍历节点的一些坐标，并将其放在Google地图上

这是我的密码

var lis = document.getElementById("showNames").getElementsByTagName("li");
var lat = document.getElementById("showLat").getElementsByTagName("li");
var lng = document.getElementById("showLng").getElementsByTagName("li");
var length = lis.length;

for (var i = 0; i < length; i++) {
    new google.maps.Marker({
        position: new google.maps.LatLng(lat[i].innerHTML, lng[i].innerHTML),
        icon: '/panasonic/images/store-icons.png'
    }).setMap(map);

}

然而，我需要它循环通过，因为我将从我的数据库更新

谢谢

您可以查看以下示例。我有一个坐标数组，当你点击“添加一些标记”链接时，它会出现在地图上


谷歌地图
var cityList=[
[Chicago'，41.850033，-87.6500523,1]，
[Illinois'，40.797177，-89.406738,2]
],
demoCenter=new google.maps.LatLng（41，-87），
地图；
函数初始化（）
{
map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：7，
中心：人口中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
}
函数addMarkers（）
{
var标记，
我
infowindow=new google.maps.infowindow（）；
对于（i=0；i


更新答案以自动显示标记：
<!doctype html>
<html lang="en">
   <head>
        <title>Google Maps</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript">

            var cityList = [
                    ['Chicago', 41.850033, -87.6500523, 1],
                    ['Illinois', 40.797177,-89.406738, 2]
                ],
                demoCenter = new google.maps.LatLng(41,-87),
                map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function addMarkers()
            {
                var marker, 
                i,
                infowindow = new google.maps.InfoWindow();

                for (i = 0; i < cityList.length; i++) 
                {  
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                        map: map,
                        title: cityList[i][0]
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(cityList[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }
            }

            $(document).ready(function() {
                initialize();
                addMarkers();
            });

        </script>
    </head>
    <body>
        <div id="basic-map">
            <div id="map_canvas" style="height:350px;"></div>
        </div>      
    </body>
</html>


谷歌地图
var cityList=[
[Chicago'，41.850033，-87.6500523,1]，
[Illinois'，40.797177，-89.406738,2]
],
demoCenter=new google.maps.LatLng（41，-87），
地图；
函数初始化（）
{
map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：7，
中心：人口中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
}
函数addMarkers（）
{
var标记，
我
infowindow=new google.maps.infowindow（）；
对于（i=0；i
您的lis
、lat
和lng包含哪些内容？谢谢您的回复。如果不使用代码的单击功能，如何显示标记？页面加载时自动显示标记。
<!doctype html>
<html lang="en">
   <head>
        <title>Google Maps</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript">

            var cityList = [
                    ['Chicago', 41.850033, -87.6500523, 1],
                    ['Illinois', 40.797177,-89.406738, 2]
                ],
                demoCenter = new google.maps.LatLng(41,-87),
                map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function addMarkers()
            {
                var marker, 
                i,
                infowindow = new google.maps.InfoWindow();

                for (i = 0; i < cityList.length; i++) 
                {  
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                        map: map,
                        title: cityList[i][0]
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(cityList[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }
            }

            $(document).ready(function() {
                initialize();
            });

            $(document).on('click', '.add-markers', function(e) {
                e.preventDefault();
                addMarkers();
            });

        </script>
    </head>
    <body>
        <div id="basic-map">
            <div id="map_canvas" style="height:350px;"></div>
            <a href="#" class="add-markers">Add Some Markers</a>
        </div>      
    </body>
</html>

<!doctype html>
<html lang="en">
   <head>
        <title>Google Maps</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript">

            var cityList = [
                    ['Chicago', 41.850033, -87.6500523, 1],
                    ['Illinois', 40.797177,-89.406738, 2]
                ],
                demoCenter = new google.maps.LatLng(41,-87),
                map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function addMarkers()
            {
                var marker, 
                i,
                infowindow = new google.maps.InfoWindow();

                for (i = 0; i < cityList.length; i++) 
                {  
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                        map: map,
                        title: cityList[i][0]
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(cityList[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }
            }

            $(document).ready(function() {
                initialize();
                addMarkers();
            });

        </script>
    </head>
    <body>
        <div id="basic-map">
            <div id="map_canvas" style="height:350px;"></div>
        </div>      
    </body>
</html>