帝国CMS添加百度地图标注的方法
给帝国CMS任意模型加上百度地图标注功能。
第一步:首先在模型建立三个字段:
字段名:map_x 字段类型:DOUBLE
字段名:map_y 字段类型:DOUBLE
字段名:map_z 字段类型:TINYINT 最好设置个默认值13 14左右,是调整缩放级别的
系统模型该选的都选上,比如录入项、投稿项、可增加、可修改、内容模版。
第二步:修改系统模型表单模版
把这三个字段的代码删除改成:
<tr><td width=’16%’ height=25 bgcolor=’ffffff’>标注地图</td> <td bgcolor=’ffffff’><a href=”javascript:void(0)” onclick=”showOrHide(1)”>点击地图标注</a></td></tr>
然后在底部添加以下代码:
<style> .belowdiv{display: none;position: absolute;top: 0%;left: 0%;width: 100% !important; width:100%;height: 100% !important; _height:1024px;background-color: gray;filter:alpha(opacity=20); opacity:0.2;z-index:1001;} .topdiv {display: none;position: absolute;top: 25%;left: 25%;width: 582px;height: 450px;padding: 16px;border-top:solid,16px,red;border-left:1px;border-right:1px;border-bottom:1px;background-color: white;z-index:1002;overflow: auto;} </style> <script type="text/javascript"> function showOrHide(flag) { if(flag == 1) { document.getElementById("top").style.display = "block"; document.getElementById("below").style.display = "block"; } if(flag == 2) { document.getElementById("top").style.display = "none"; document.getElementById("below").style.display = "none"; } } </script> <div id="top" class="topdiv"> 当前坐标:[!--map_x--] – [!--map_y--] 缩放:[!--map_z--] <a href = "javascript:void(0)" onclick = "showOrHide(2)">提交</a> <div style="width:520px;height:340px;border:1px solid gray" id="container"> </div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> <script type="text/javascript"> var map = new BMap.Map("container"); var point = new BMap.Point(115.449106, 38.887932); //初始位置,我这个是保定可能是css原因,这个坐标位置偏移一点 map.addControl(new BMap.NavigationControl()); //鱼骨控件显示 map.enableScrollWheelZoom(); map.centerAndZoom(point, 14); //初始缩放级别 // 获取经度 纬度 map.addEventListener("click", function(e){ document.getElementById("map_x").value=e.point.lng; document.getElementById("map_y").value=e.point.lat; //下面这行是点击提示语,需要可以去掉 "//" // alert("系统已记录您标注的位置坐标"); }); // 获取缩放 map.addEventListener("zoomend", function(){ document.getElementById("map_z").value=this.getZoom(); }); // 设置个默认点,移动这个图标也可以获得坐标。不想要也可以删除 var point = new BMap.Point(115.487362, 38.868383); // 默认标注图标位置 var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var opts = { width : 250, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "温馨提示" // 信息窗口标题 } var infoWindow = new BMap.InfoWindow("您可以移动此图标到您所在位置或点击您所在的位置,系统会自动获得坐标", opts); // 创建信息窗口对象 marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow); }); // 移动获取坐标 marker.enableDragging(); marker.addEventListener("dragend", function(e){ document.getElementById("map_x").value=e.point.lng; //移动中心点改变坐标 document.getElementById("map_y").value=e.point.lat; //下面这行是移动坐标提示语,需要可以去掉 "//" // alert("系统已记录您当前位置坐标:" + e.point.lng + ", " + e.point.lat + ""); }); </script> </div> <div id="below" class="belowdiv"></div>
这样就可以把坐标和缩放级别存储于数据库了
第三步:内容页模板中调用:
<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.2″></script> <div style=”width:520px;height:340px;border:1px solid gray” id=”container”></div> <script type=”text/javascript”> var sContent = “<h4 style=’margin:0 0 5px 0;padding:0.2em 0′>[!--title--]</h4>” + “<img style=’float:right;margin:4px’ id=’imgDemo’ src=’[!--titlepic--]‘ width=’139′ height=’104′ title=’[!--title--]‘/>” + “<p style=’margin:0;line-height:1.5;font-size:13px;text-indent:2em;width:320px;’>[!--smalltext--]…</p>” + “</div>”; var map = new BMap.Map(“container”); var point = new BMap.Point([!--map_x--], [!--map_y--]); var marker = new BMap.Marker(point); var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象 map.centerAndZoom(point, [!--map_z--]); map.addOverlay(marker); marker.addEventListener(“click”, function(){ this.openInfoWindow(infoWindow); //图片加载完毕重绘infowindow document.getElementById(‘imgDemo’).onload = function (){ infoWindow.redraw(); } }); </script>
至此,地图标注功能便做好了。
(资源库 www.zyku.net)
上一篇:帝国CMS灵动标签实现当前栏目高亮支持二级栏目及内容页及栏目排序
栏 目:帝国CMS
本文标题:帝国CMS添加百度地图标注的方法
本文地址:https://www.zyku.net/ecms/1145.html
您可能感兴趣的文章
- 02-13Python趣味挑战之用pygame实现飞机塔
- 01-11极速恢复王-极速恢复王应用软件功能介
- 09-19iqoo8pro怎么删除应用消息提示
- 09-30手把手教你使用 VuePress 搭建个人博
- 02-18html5 div布局与table布局详解
- 01-12修修美图-修修美图应用软件功能介绍
- 01-13自拍社-自拍社应用软件功能介绍
- 10-30iOS15.2如何开启隐私报告
- 03-14miui13系统分屏设置方法
- 01-12品技云谷-品技云谷应用软件功能介绍
- 05-05实例讲解Nginx下的rewrite规则
- 11-20jQuery点击弹出支付宝微信二维码扫码
- 01-12飞凡汽车-飞凡汽车应用软件功能介绍
- 02-24华为平板启用三键导航方法
- 12-07苹果手机如何调节屏幕清晰度
- 07-09CentOS文件解压缩7z安装与使用方法
- 01-11九年级英语帮-九年级英语帮应用软件功
- 11-02html标签table居中的方法
- 02-10详解Python魔法方法之描述符类
- 09-29vivox70在哪里开启蓝牙连接
最近更新
阅读排行
猜你喜欢
- 02-18oppofindx3pro调整字体大小方法
- 12-10苹果13储存空间在哪看
- 02-13opporeno5禁止夜间自动更新教程
- 01-23华为手机自带相机怎么拍正方形照片
- 12-18HTML <pre> 标签
- 02-12vivoy30开启OTG方法
- 01-12漫本漫画-漫本漫画应用软件功能介绍
- 02-15荣耀手环6开启睡眠监测设置方法
- 09-18微信i厦门疫情地图查看教程介绍
- 12-27提喀智柜维修端-提喀智柜维修端应用软