首页 > 解决方案 > 使用 Google Maps API,如何在当前缩放级别上用所有可见标记填充 html 表格

问题描述

我有一个空的 html 表和一个带有一些标记的谷歌地图。所有标记都存储在一个数组中。当用户放大地图时,标记位置应填满空表。那么,我将如何实现这一目标?

在此处输入图像描述

        <div id="MapRender"></div>


            <table>
                <thead>
                    <tr>
                        <th>Location</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                    </tr>
                </tbody>
            </table>


    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxx"></script>  

    <script type="text/javascript">
    function LoadGoogleMAP() {

        var mapProp = {
            zoom: 4,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('MapRender'), mapProp);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(23.592360,76.733660),
            map: map,
            optimized: false,
            title: 'Place1'
        })

        var marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(22.174507, 88.777137),
            map: map,
            optimized: false,
            title: 'Place2'
        })
    }
    google.maps.event.addDomListener(window, 'load', LoadGoogleMAP);

</script>

标签: javascriptjqueryhtmlcssgoogle-maps

解决方案


推荐阅读