循环列表所有动态地图

<ul class="contact_aa_list">
    {% for value in app('section').id('71965') %}
    <li>
        <!-- Add a unique ID for each map container -->
        <div class="map-container" id="map{{ loop.index }}" data-lat="{{ value.latitude }}" data-lng="{{ value.longitude }}"></div>
        <div class="mpp-text">
            <p>{{ value.name }}</p>
            <p>{{ value.summary }}</p>
            <p>{{ value.text1 }}</p>
            <p>{{ value.text2 }}</p>
            <p>{{ value.text3 }}</p>
        </div>
    </li>
    {% endfor %}
</ul>

<!-- 百度地图API -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MsEgHvDr7HFQIr2hRPxdpjQTraXMY3zw"></script>
 
<script>
    $(function() {
        //循环浏览所有地图容器
        $('.map-container').each(function(index, element) {
            var $mapContainer = $(element);
            var lat = parseFloat($mapContainer.data('lat'));
            var lng = parseFloat($mapContainer.data('lng'));
            var mapId = 'map' + (index + 1); 
           
            //为每个容器创建一个新的映射实例
            var map = new BMap.Map(mapId);
            var point = new BMap.Point(lng, lat);
            map.centerAndZoom(point, 20);
            var myIcon = new BMap.Icon("//cdn.myxypt.com/68c58884/23/08/f64674e7f1f0df64900e1d76e0c0812c6aec7224.png", new BMap.Size(30, 45));
            //为每个位置添加一个标记
            var marker = new BMap.Marker(point, {
                icon: myIcon
            }); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
            map.enableScrollWheelZoom(); // 缩放

            //从相应的.mpp文本元素中获取位置标题和地址
            var $mppText = $mapContainer.next('.mpp-text');
            var title = $mppText.find('p').eq(0).text(); //位置标题
            var content = $mppText.find('p').eq(3).text(); //位置地址

            //为每个位置创建一个信息窗口
            var infoWindow = new BMap.InfoWindow(content, { title: title });
            marker.addEventListener("click", function () {
                this.openInfoWindow(infoWindow);
            });
        });
    });
</script>

<style>
    .contact_aa_list{padding-top: 25px;}
    .contact_aa_list li{position: relative;display: flex;justify-content: space-between;flex-wrap: wrap;}
    .contact_aa_list li .map-container{width: 47.23%;height: 350px;}
    .contact_aa_list li .map-container img{display: block;width: 100%;}
    .contact_aa_list li .mpp-text{background: #fff;border: 1px solid #DEDFE4;width: 48.02%;box-shadow: 0 0 5px #DEDFE4;} 
</style>

百度地图坐标拾取工具  http://api.map.baidu.com/lbsapi/getpoint/index.html