人人站CMS - 企業建站系統_免費_安全_易用-rrzcms

第一步先獲取到坐標

打開百度坐標獲取 https://api.map.baidu.com/lbsapi/getpoint/index.html

在地圖上找到想要的位置點擊生成坐標

第二步：復制下面代碼插入到文章中或插入到模板文件中都可以。插入后如下圖修改為自己的坐標和名稱。

    <div style="width:100%;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>
    <script type="text/javascript" src="//api.map.baidu.com/getscript?v=2.0&ak=OfldXkI591GW281wpaUBSHES&services=&t=20200103103842"></script>
    <script>
        (function () {
            var coord = "116.403694,39.914935";//使用第一步獲取的坐標替換
            coord = coord.split(",");
            if (coord.length != 2) {
                coord[0] = 116.403694;
                coord[1] = 39.914935;
            }

            var map = new BMap.Map("map");
            map.centerAndZoom(new BMap.Point(coord[0],coord[1]), 14);
            var marker1 = new BMap.Marker(new BMap.Point(coord[0],coord[1]));  // 創建標注
            map.addOverlay(marker1);              // 將標注添加到地圖中
            //marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
            //創建信息窗口
            var infoWindow1 = new BMap.InfoWindow("<b>公司名稱</b><br>地址：公司地址<br>電話：公司電話");
            marker1.openInfoWindow(infoWindow1);
            marker1.addEventListener("click", function () {
                this.openInfoWindow(infoWindow1);
            });
            //向地圖中添加縮放控件
            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_RIGHT, isOpen: 1 });
            map.addControl(ctrl_ove);
            //向地圖中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
            map.addControl(ctrl_sca);

            map.enableDragging();//啟用地圖拖拽事件，默認啟用(可不寫)
            map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小
            map.enableDoubleClickZoom();//啟用鼠標雙擊放大，默認啟用(可不寫)
            map.enableKeyboard();//啟用鍵盤上下左右鍵移動地
        })();
    </script>

將地圖插入到文章中如下：

將地圖插入模板源碼中：