CMS建站知识

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

本站提供企业建站、网站托管、AAA信用认证、企业地图标注、软件著作权登记、百度百科创建与维护等服务,如有需要请扫码上方微信联系在线人工客服

目前地图在自主网站里面的显示使用已经被利用的非常普遍,然而由于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个工作日的时间。

当前文章链接:https://www.diebaosoft.com/10893.html
【友情提示:】
1、[焦点热议]及其子栏目内容为网络转载,其它栏目内容系作者个人原创文章观点,不代表除作者外的任何第三方观点赞同或支持;
2、「♚付涛纪实阁♚」原创文章均为本人工作、学习过程中重点事项点的记录,便于日后面对相同问题时候的复盘总结,同时原创内容遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除;若文内明确指转载来源于权威渠道,若需删除本站内容,可在处理完权威渠道来源信息后,第一时间联系本站给予无条件删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议由使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;

发表评论