人人站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>

将地图插入到文章中如下：

将地图插入模板源码中：