百度地图带红色标记

用例

by l xk

HTML

<script src="http://api.map.baidu.com/api?v=2.0&amp;ak=A4749739227af1618f7b0d1b588c0e85"></script>
<script src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css">
<script src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A4749739227af1618f7b0d1b588c0e85"></script>
<!-- 加载百度地图样式信息窗口 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<!-- 加载城市列表 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>



< div id="l-map">
  < /div>
    < div id="result">
      < button id="open"> 打开
        < /button>
          < button id="close"> 关闭
            < /button>
              < /div>
                <!--城市列表-->
                < div class="sel_container">
                  < strong id="curCity"> 北京市
                    < /strong> [
                      < a id="curCityText" href="javascript:void(0)"> 更换城市
                        < /a>]
                          < /div>
                            < div class="map_popup" id="cityList" style="display:none;">
                              < div class="popup_main">
                                < div class="title"> 城市列表
                                  < /div>
                                    <!-- 城市列表的内容会显示在这里面 -->
                                    < div class="cityList" id="citylist_container">
                                      < /div>
                                        <!-- 关闭按钮 -->
                                        < button id="popup_close">
                                          <...

CSS

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
  font-size: 14px;
}

#l-map {
  width: 100%;
  height: 95%;
  overflow: hidden;
}

#result {
  width: 100%;
}

li {
  line-height: 28px;
}

.cityList {
  height: 320px;
  width: 380px;
  overflow-y: auto;
}

.sel_container {
  z-index: 9999;
  font-size: 12px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 140px;
  background: rgba(255, 255, 255, 0.8);
  height: 30px;
  line-height: 30px;
  padding: 5px;
  text-align: center;
}

.map_popup {
  position: absolute;
  z-index: 200000;
  width: 380px;
  height: 344px;
  right: 0px;
  top: 40px;
}

.map_popup .popup_main {
  background: #fff;
  border: 1px solid #8BA4D8;
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.map_popup .title {
  background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
  color: #6688CC;
  font-weight: bold;
  height: 25px;
  line-height: 25px;
  padding-left: 7px;
}

JavaScript

// 百度地图API功能
var map = new BMap.Map("l-map"); // 创建地图实例
var point = new BMap.Point(113.391201, 23.103967); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
var customLayer;

function addCustomLayer(keyword) {
  if (customLayer) {
    map.removeTileLayer(customLayer);
  }
  customLayer = new BMap.CustomLayer({
    geotableId: 30960,
    q: '', //检索关键字
    tags: '', //空格分隔的多字符串
    filter: '' //过滤条件,参考http://lbsyun.baidu.com/lbs-geosearch.htm#.search.nearby
  });
  map.addTileLayer(customLayer);
  customLayer.addEventListener('onhotspotclick', callback);
}

function callback(e) //单击热点图层
{
  var customPoi = e.customPoi; //poi的默认字段
  var contentPoi = e.content; //poi的自定义字段
  var content = '<p style="width:280px;margin:0;line-height:20px;">地址：' + customPoi.address + '<br/>价格:' +
    contentPoi.dayprice + '元' + '</p>';
  var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
    title: customPoi.title, //标题
    width: 290, //宽度
    height: 40, //高度
    panel: "panel", //检索结果面板
    enableAutoPan: true, //自动平移
    enableSendToPhone: true, //是否显示发送到手机按钮
    searchTypes: [
      BMAPLIB_TAB_SEARCH, //周边检索
      BMAPLIB_TAB_TO_HERE, //到这里去
      BMAPLIB_TAB_FROM_HERE //从这里出发
    ]
  });
  var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
  searchInfoWindow.open(point);
}
document.getElementById("open").onclick = function() {
  addCustomLayer();
};
//模拟点击,使得第一次打开地图就会有红色标记显示
document.getElementById("open").click();
document.getElementById("close").onclick = function() {
  if (customLayer) {
    map.removeTileLayer(customLayer);
  }
};
// 创建CityList对象，并放在citylist_container节点内
var myCl = new BMapLib.CityList({
  container: "citylist_container",
  map: map
});

// 给城市点击时，添加相关操作
myCl.addEventListener("cityclick", function(e) {
  // 修改当前城市显示
  document.getElementById("curCity").innerHTML = e.name;

  // 点击后隐藏城市列表
 ...