百度地图api for js 优化

首先先准备一个div 

    <div id="infoWindow" class="map_info_window">
        <a href="/mobile/resource/case/$broker_case.id$">
            <h4 class="map_info_title">$broker_case.title$</h4>
            <img class="map_info_head" id=‘imgDemo‘ src=$cover_image_url$ width=‘139‘ height=‘104‘ title=‘小庄‘/>
            <p class="map_info_description">"$broker_case.community_info.area_info.full_name$"</p>
            <img class="map_info_img" id=‘imgDemo‘ src=$cover_image_url_des$ width=‘139‘ height=‘104‘ title=‘小庄‘/>
        </a>
    </div>

获取这个div 并设置为弹出窗口

<script type="text/javascript">

        //创建地图函数：
        var createMap = function (longitude, latitude) {
            window.map = new BMap.Map("dituContent");
            var point = new BMap.Point(longitude, latitude);
            map.centerAndZoom(point, 7);//设定地图的中心点和坐标并将地图显示在地图容器中
            map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
            map.addControl(new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_SMALL
            }));
        };
        var markerList = [];
        var windowList = [];
        function renderData(case_list) {
            map.clearOverlays();
            if (case_list == null || case_list == undefined) {
                return;
            }
            for (var index = 0; index < case_list.length; index++) {
                var broker_case = case_list[index];
                var community_info = broker_case.community_info;
                if (community_info == undefined ||
                        community_info.longitude == undefined ||
                        community_info.latitude == undefined) {
                    continue;
                }
                var point = new window.BMap.Point(community_info.longitude, community_info.latitude);
                var marker = new window.BMap.Marker(point);
                var html = $(‘#infoWindow‘).html();
                var ht = html.replace("$broker_case.title$", broker_case.title)
                        .replace("$broker_case.community_info.area_info.full_name$", broker_case.community_info.area_info.full_name)
                        .replace("$cover_image_url$", broker_case.service_user_info.user_info.user_img == null ? "/static/mobile/img/jingjiren.jpg" : broker_case.service_user_info.user_info.user_img)
                        .replace("$cover_image_url_des$", broker_case.cover_image_url)
                        .replace("$broker_case.id$", broker_case.id);
                var infoWindow = new BMap.InfoWindow(ht, {
                    width: 100,    // 信息窗口宽度
                    height: 150,     // 信息窗口高度
                    title: ‘‘
                });
                windowList.push(infoWindow);
                markerList.push(marker);
                marker.addEventListener("click", function () {
                    var i = markerList.indexOf(this);
                    this.openInfoWindow(windowList[i]);
                });
                map.addOverlay(marker);
            }
        }

        function loadBrokerCaseList(bounds) {
            var query = $(‘#search‘);
            var query_data = {
                ‘west‘: bounds.getSouthWest().lng,
                ‘south‘: bounds.getSouthWest().lat,
                ‘east‘: bounds.getNorthEast().lng,
                ‘north‘: bounds.getNorthEast().lat,
                ‘j‘: ‘true‘,
                ‘query‘: query.val(),
            };

            $.getJSON("{% url ‘mobile_resource_broker_case_list‘ %}", query_data,
                    function (result) {
                        if (result["code"] != 200) {
                            alert("Backend error.");
                            return;
                        }
                        renderData(result[‘case_list‘]);
                    }
            );
        }
        var refreshBrokerCaseList = function () {
            loadBrokerCaseList(map.getBounds());
        };

        $(function () {
            var shijiazhuang_changangongyuan = {
                ‘longitude‘: 114.518438,
                ‘latitude‘: 38.052847,
            };
            var beijing_jingwangfen = {
                ‘longitude‘: 116.32911768751899,
                ‘latitude‘: 39.936629687519,
            };

            var initial_location = shijiazhuang_changangongyuan;

            // Create baidu map with default location.
            createMap(initial_location.longitude, initial_location.latitude);

            // Load inital data.
            refreshBrokerCaseList();
            if (navigator.geolocation) {
                getCurrentLocation(function (position) {
                    map.panTo(new BMap.Point(position.longitude, position.latitude));
                    refreshBrokerCaseList();
                });
            }

            map.addEventListener("dragend", function () {
                refreshBrokerCaseList();
            });

        });

    </script>

外部css 样式为 ：

.map_info_window {
    display: none;
}

.map_info_title {
    margin: 0 0 0 0;
    padding: 0.2em 0;
    text-align: center;
    position: relative;
}

.map_info_description{
    margin: 0;
    text-align: center;
    text-indent: 70px;
    line-height: 1.5;
    font-size: 13px;
    margin-bottom: 5px;
}

.map_info_head {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 4px;
    left: 20px;
    border-radius: 20px;
}

.map_info_img {
    margin: 0 auto;
    width: 100%;
}