pbootcms如何在后台添加自定义动态地图标记 支持拖拉式

目前地图在自主网站里面的显示使用已经被利用的非常普遍，然而由于API接口原因及相应权限问题，并不是每一个WEB开发者都有着属于自己的API接口权限；这也导致了在一定程度上通过传统的API接入的方式不被看好、甚至网站使用一段时间后，弹出错误提示；

针对此百度地图显示问题我们给予两种解决方案

方案一、直接IFRAME嵌入MAP文件

下载以下map.html地图文件，然后放置在网站根据目录下，然后再需要显示地图的位置通过以下代码调用当前map文件即可；

<iframe id="mainiframe" width="100%" height="1600" onload="changeFrameHeight()" src="/map.html" frameborder="0" scrolling="auto" style="border:0;background:none;" frameborder="0" allowtransparency="true"></iframe>
<script type="text/javascript" language="javascript"> 
function changeFrameHeight(){
var ifm= document.getElementById("mainiframe");
ifm.height=document.documentElement.clientHeight-4;
}
window.onresize=function(){ changeFrameHeight();}
$(function(){changeFrameHeight();});
</script>

MAP文件下载：2021113023301886

显示效果如下：

方案二、pbootcms后台自定义参数配置

针对一个地图在页面里面的显示通常我们需要修改以下几个地方：

1、目标位置的精准坐标；

2、想在地图上默认显示的内容；（可单行亦可多行）

为了能够在后台配置，故我们需要为我们想要两个参数在后台添加两个字段：

第一步：添加坐标与地图内容字段

登陆Pbootcms后台，选择全局配置——》定制标签——》新增标签，然后在里面添加相应的两个字段，如下所示：

第二步：在前端目标页面里面添加地图调用代码

如果我们需要在联系我们页面里面添加地图显示，则打开about.html里面，在{content:content}标签后添加 以下代码：

<script src="https://api.map.baidu.com/api?v=2.0&ak=UwrDLDbFuAtRiZXGzkgx4c3m&s=1"></script>
<div id="partBox3" class="partBox">
<div id="mapBox">
</div>
</div>
<script>
// 百度地图API功能
var ggPoint = new BMap.Point({label:qiyezuobiao});
//地图初始化
var bm = new BMap.Map("mapBox");
bm.centerAndZoom(ggPoint, 18);
bm.addControl(new BMap.NavigationControl());
//添加gps marker和label
var markergg = new BMap.Marker(ggPoint);
bm.addOverlay(markergg); //添加GPS marker
var marker = new BMap.Marker(ggPoint);
bm.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var opts = {
position : ggPoint, // 指定文本标注所在的地理位置
offset : new BMap.Size(-25, -50) //设置文本偏移量
}
var label = new BMap.Label("{label:dituneirong}", opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "100px",
lineHeight : "20px",
padding:"20px",
fontFamily:"微软雅黑"
});
bm.addOverlay(label);
</script>

第三步、如何获取目标地址相对应的坐标

打开http://api.map.baidu.com/lbsapi/getpoint/此网站，然后输入自己的目标地址，再在右侧选择相近位置或者已经存在的定位地址，再在右上角复制坐标即可；

第四步、如何申请百度地图API下的应用AK

1、注册并登录百度地图开放平台（http://lbsyun.baidu.com/）。
2、登陆后台后点击【控制台】按钮。
3、页面跳转后，控制台初始页面如图3-1所示，点击【创建应用】按钮并填写如图3-2中的信息。填写完毕后提交申请。
4、申请认证，如图4-1中点击【我要认证】，对AK进行认证操作，认证大概需要2个工作日的时间。