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

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

浏览次数:
来源: 互联网
信息来源:
更新日期: 2019-08-12
文章简介

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



第一步:首先在模型建立三个字段:

字段名:map_x 字段类型:DOUBLE

字段名:map_y 字段类型:DOUBLE

字段名:map_z 字段类型:TINYINT

  • 正文开始
  • 相关文章

给帝国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);
//图片加载完毕重绘infowindow
document.getElementById(‘imgDemo).onload = function (){
infoWindow.redraw();
}
});
</script>

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

 

帝国CMS添加百度地图标注方法文档下载.doc

转载请注明:帝国模板 » 帝国CMS添加百度地图标注方法

收藏此文 感觉不错,赞哦! () 打赏本站

如本文对您有帮助,就请墨鱼抽根烟吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
帝国CMS常用调用标签
« 上一篇 2019-08-12
帝国CMS单页面栏目解决方案,支持当前栏目高亮,方法其一
下一篇 » 2019-08-12

精彩评论

最近更新内容更多
帝国备份王安装网站方法
更新时间: 2019-10-22 20:34:56

112人已经看过了!

帝国CMS如何更改搜索后的返回页面--以及更改后不生效的解决方法!
更新时间: 2019-08-12 14:00:01

87人已经看过了!

虚拟货源代理平台,帝国CMS整站源码里面头部几个色块广告的原图
更新时间: 2019-08-12 13:59:58

84人已经看过了!

2014年做过的修过的移植过的那些模板!全部帝国CMS核心!
更新时间: 2019-08-12 13:59:57

59人已经看过了!

虚拟货源代理平台,帝国CMS整站源码 增加友情链接的方法
更新时间: 2019-08-12 13:59:56

54人已经看过了!

帝国CMS 弹出下载和直接下载 的修改方法!
更新时间: 2019-08-12 13:59:52

62人已经看过了!

帝国CMS统一修改已添加内容页存放目录修改成自定义
更新时间: 2019-08-12 13:59:50

61人已经看过了!