百度地图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%; }