用phpcms建企業站 在HTML中插入地圖

標籤：etl   變數   tle   san   add   java   scrolling   wrap   鍵盤   

首先

開啟“百度地圖產生器”的網址：http://api.map.baidu.com/lbsapi/creatmap/index.html

示：

 

按步驟 定位到要插入地圖的城市 具體位置

 

 

 

 

根據個人需求調整地圖尺寸 控制按鈕 修改地圖狀態

 

添加標註  根據需要標記位置  填寫名稱 備忘  點擊儲存

 

   

點擊預覽  可以看到 插入之後的顯示情況

 

點擊預覽 可以擷取代碼 複製粘貼 建立一個html檔案 

如果要把地圖添加到現有的網頁中，可以使用iframe標籤，如：

<iframe src="map.html" width="600" height="300" frameborder="0" scrolling="no"></iframe>

如果 使用phcmc 需要截取代碼 分別插入到 header.html 、footer.html 以及你想要插入位置的所屬檔案

具體如下：

插入到 header.html

<!--引用百度地圖API--><style type="text/css">    html,body{margin:0;padding:0;}    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}</style><script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

　　插入到 footer.html

<script type="text/javascript">    //建立和初始化地圖函數：    function initMap(){        createMap();//建立地圖        setMapEvent();//設定地圖事件        addMapControl();//向地圖添加控制項        addMarker();//向地圖中添加marker    }        //建立地圖函數：    function createMap(){        var map = new BMap.Map("dituContent");//在百度地圖容器中建立一個地圖        var point = new BMap.Point(118.091747,36.835259);//定義一個中心點座標        map.centerAndZoom(point,14);//設定地圖的中心點和座標並將地圖顯示在地圖容器中        window.map = map;//將map變數儲存在全域    }        //地圖事件設定函數：    function setMapEvent(){        map.enableDragging();//啟用地圖拖拽事件，預設啟用(可不寫)        map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小        map.enableDoubleClickZoom();//啟用滑鼠雙擊放大，預設啟用(可不寫)        map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖    }        //地圖控制項添加函數：    function addMapControl(){        //向地圖中添加縮放控制項var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrl_nav);        //向地圖中添加縮圖控制項var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT,isOpen:1});map.addControl(ctrl_ove);        //向地圖中添加比例尺控制項var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca);    }        //標註點數組    var markerArr = [{title:"我的工作室",content:"攝影",point:"118.063989|36.845469",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}} ];    //建立marker    function addMarker(){        for(var i=0;i<markerArr.length;i++){            var json = markerArr[i];            var p0 = json.point.split("|")[0];            var p1 = json.point.split("|")[1];            var point = new BMap.Point(p0,p1);var iconImg = createIcon(json.icon);            var marker = new BMap.Marker(point,{icon:iconImg});var iw = createInfoWindow(i);var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});marker.setLabel(label);            map.addOverlay(marker);            label.setStyle({                        borderColor:"#808080",                        color:"#333",                        cursor:"pointer"            });(function(){var index = i;var _iw = createInfoWindow(i);var _marker = marker;_marker.addEventListener("click",function(){    this.openInfoWindow(_iw);    });    _iw.addEventListener("open",function(){    _marker.getLabel().hide();    })    _iw.addEventListener("close",function(){    _marker.getLabel().show();    })label.addEventListener("click",function(){    _marker.openInfoWindow(_iw);    })if(!!json.isOpen){label.hide();_marker.openInfoWindow(_iw);}})()        }    }    //建立InfoWindow    function createInfoWindow(i){        var json = markerArr[i];        var iw = new BMap.InfoWindow("<b class=‘iw_poi_title‘ title=‘" + json.title + "‘>" + json.title + "</b><div class=‘iw_poi_content‘>"+json.content+"</div>");        return iw;    }    //建立一個Icon    function createIcon(json){        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})        return icon;    }        initMap();//建立和初始化地圖</script></html>

　　插入位置的所屬檔案

 

 <!--百度地圖容器-->  <div style="width:697px;height:300px;border:#ccc solid 1px;" id="dituContent"></div>

　　插入位置出現地圖 

       

 

用phpcms建企業站 在HTML中插入地圖