[置顶] 项目开发中引入百度地图（灾情信息分享网）

效果图

首先要说的是 一个web页面是由上而下的执行  因此引入javascript的时候 必须把javascript代码写在页面的下方  不然会出现 页面加载完了 地图没有加载进来，

<script type="text/javascript">/*<![CDATA[*/                                                       

// 创建地图对象并初始化
var mp = new BMap.Map("divmap",{
    enableHighResolution: true //是否开启高清
});
var point = new BMap.Point(116.404, 39.915);
mp.centerAndZoom(point, 3); //初始化地图
mp.enableInertialDragging(); //开启关系拖拽
mp.enableScrollWheelZoom();  //开启鼠标滚动缩放

// 添加定位控件
//var geoCtrl = new BMap.GeolocationControl({
//    showAddressBar       : true //是否显示
//    , enableAutoLocation : true //首次是否进行自动定位
//    , offset             : new BMap.Size(0,25)
//    , locationIcon     : icon //定位的icon图标
//});
//监听定位成功事件
//geoCtrl.addEventListener("locationSuccess",function(e){
//        console.log(e);
//});

////监听定位失败事件
//geoCtrl.addEventListener("locationError",function(e){
//        console.log(e);
//});

//// 将定位控件添加到地图
//mp.addControl(geoCtrl);

//检索类型
var type = "";
type = LOCAL_SEARCH ;   //周边检索
//type = TRANSIT_ROUTE; //公交检索
//type = DRIVING_ROUTE; //驾车检索

//创建鱼骨控件
var navCtrl = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT //设置鱼骨控件的位置
});
// 将鱼骨添加到地图当中
mp.addControl(navCtrl);


// 添加默认比例尺控件
mp.addControl(new BMap.ScaleControl());               
mp.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));  
 
//添加路况控件
var ctrl = new BMapLib.TrafficControl({
   showPanel: false //是否显示路况提示面板
});      
mp.addControl(ctrl);
ctrl.setAnchor(BMAP_ANCHOR_TOP_RIGHT);
var point = new BMap.Point(103.5, 31.4);
var marker= new BMap.Marker(point);mp.addOverlay(marker);

//添加节点
addMarker(mp,point);

</script>                                                                                                           

另外有时候我们需要从后台加载信息

也必须把lable 标签 或者是literal 标签放在页面的下方 不然会出现页面加载不了的情况

  例如我就把他放在footer当中

<asp:Literal ID="litMaker" runat="server"></asp:Literal>

后台我是这样写的  ===========================================

 Pictures p = new Pictures();
            foreach (DataRow row in  ds.Tables[0].Rows)
            {
               
                string l = row["Longitude"].ToString();
                string w = row["Latitude"].ToString();
                string title = row["DisasterTitle"].ToString().Replace("\"","").Replace("'", "");
                string sContent = "\"<h4>" + title + "</h4>\"";
                int disasterid = Convert.ToInt32(row["DisasterId"]);
               // script += sContent;
                script += "var point = new BMap.Point(" + l + ", " + w + ");var marker= new BMap.Marker(point);mp.addOverlay(marker);marker.addEventListener(\"click\", function(){this.openInfoWindow(new BMap.InfoWindow(\"<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + title + "</h4><img style='float:right;margin:4px' id='imgDemo' src='" + GetPicUrl(disasterid) + "' width='139' height='104' title='" + title + "'/><p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'></p><br/>经度:" + l + "<br/>纬度：" + w + "<br/>参考位置：" + row["Region"] + "<br/></div>\"))});";

            }

            litMaker.Text = " <script type=\"text/javascript\">function addMarker(mp,point){" + script + " }</script>";

}