目前地图在自主网站里面的显示使用已经被利用的非常普遍,然而由于API接口原因及相应权限问题,并不是每一个WEB开发者都有着属于自己的API接口权限;这也导致了在一定程度上通过传统的API接入的方式不被看好、甚至网站使用一段时间后,弹出错误提示;
针对此百度地图显示问题我们给予两种解决方案
下载以下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
显示效果如下:
针对一个地图在页面里面的显示通常我们需要修改以下几个地方:
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/此网站,然后输入自己的目标地址,再在右侧选择相近位置或者已经存在的定位地址,再在右上角复制坐标即可;
1、注册并登录百度地图开放平台(http://lbsyun.baidu.com/)。
2、登陆后台后点击【控制台】按钮。
3、页面跳转后,控制台初始页面如图3-1所示,点击【创建应用】按钮并填写如图3-2中的信息。填写完毕后提交申请。
4、申请认证,如图4-1中点击【我要认证】,对AK进行认证操作,认证大概需要2个工作日的时间。