帝国CMS添加百度地图标注方法

  • 压缩包大小:Unkown
  • 开发语言:
  • 软件授权:
  • 更新时间:2022-12-31 00:58:48
  • 软件类别:
  • 相关链接:未知官方
  • 网友评分:
  • 应用平台:Win2000/WinXP/Win2003
  • 演示地址:演示地址

给帝国CMS任意模型加上百度地图标注功能。

1.jpg

1.jpg

第一步:首先在模型建立三个字段: 字段名: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--] &nbsp;&nbsp;<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);//图片加载完毕重绘infowindowdocument.getElementById(‘imgDemo).onload = function (){infoWindow.redraw();}});</script>

至此,地图标注功能便做好了。

以上就是帝国CMS添加百度地图标注方法。长大,就要学会,心平气和的面对兵荒马乱。早安更多关于帝国CMS添加百度地图标注方法请关注haodaima.com其它相关文章!

关键词: 帝国CMS

下载地址

下载失败问题?【我要反馈】

提示:好代码网站资源是由用户投稿上传,内容来自互联网,本站只做免费推荐用于学习分享,如有版权及其他问题,请联系小编处理!

下载“jQuery焦点无缝轮播图特效”地址:

  • 日榜
  • 周榜
  • 月榜

推荐下载

  • 开发手册
  • 常用软件