帝国CMS添加百度地图标注方法
更新时间:2016年5月19日 22:51 点击:2448
给帝国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>
至此,地图标注功能便做好了。
相关文章
- 采用CSS覆盖的方法就可以了,但是官方是不允许这么做的...2013-10-13
- 是否提取 getfirsttitlepic 1 缩略图宽度 getfirsttitlespicw 105 缩略图高度 getfirsttitlespich 118...2014-10-17
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30- /*解决代码高亮太长不换行*/ .syntaxhighlighter{word-break:break-all;} uParse('#newstext', {rootPath: '/e/extend/ueditor/'}) 帝国CMS显示指定时间内更新的信息数...2016-11-01
- 这篇文章主要介绍了百度地图API之百度地图退拽标记点获取经纬度的实现代码,需要的朋友可以参考下...2017-01-16
- 用灵动标签(e:loop)可以实现各种幻灯效果,本节讲解制作幻灯的基本方法。 如本站JS焦点图频道里的大部分幻灯图片效果都可以用灵动标签调用的。 ...2015-12-30
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30帝国CMS把[!--list.pageno--]就替换成“第[!--list.pageno--]页
/*解决代码高亮太长不换行*/ .syntaxhighlighter{word-break:break-all;} uParse('#newstext', {rootPath: '/e/extend/ueditor/'}) 打开:e\class\functions.php 修改 $s...2017-07-06- 这篇文章主要介绍了百度地图给map添加右键菜单(判断是否为marker) 的相关资料,需要的朋友可以参考下...2016-03-07
帝国CMS登录后台提示"您的Cookie没有开启,不能登陆成功"的解决方法
如果没有动过文件特别是/e/config/config.php文件的话!请按照如下操作肯定就OK了! 到你的主机或者服务器环境里找到php.ini文件(如果不知道在哪联系你的空间商就行了) 找到如下...2016-05-19- /*解决代码高亮太长不换行*/ .syntaxhighlighter{word-break:break-all;} uParse('#newstext', {rootPath: '/e/extend/ueditor/'}) 用灵动标签调用最新最多评论文章: [...2016-08-27
- /*解决代码高亮太长不换行*/ .syntaxhighlighter{word-break:break-all;} uParse('#newstext', {rootPath: '/e/extend/ueditor/'}) php随机文章 方法1、WC写的高效随...2017-07-06
- 刚升级一会就出现 Multiple primary key definedalter table ***_ecms_infoclass_shop change classid classid int(10) unsigned NOT NULL default '0', DROP INDEX clas...2013-05-20
- 帝国CMS安装以及恢复数据模板视频教程,主要讲解了墨鱼出品的帝国CMS源码的安装以及数据库模板的回复过程,请大家注意视频里的一些操作细节。选择超清模式播放!...2016-05-08
帝国CMS灵动标签调用当前父栏目下所有子栏目-支持选中状态/高亮
帝国CMS实现灵动标签调用当前父栏目下所有子栏目-支持选中状态及当前栏目高亮,支持栏目自定义排序。最适用于内容模板,显示父栏目下的子栏目。 支持静态栏目页与动态栏目页 代...2016-05-19- 商品加入购物车链接地址为:[!--news.url--]e/ShopSys/doaction.php?enews=AddBuycar&classid=[!--classid--]&id=[!--id--]...2015-12-30
- 给帝国CMS任意模型加上百度地图标注功能。 第一步:首先在模型建立三个字段: 字段名:map_x 字段类型:DOUBLE 字段名:map_y 字段类型:DOUBLE 字段名:map_z 字段类型:TINYINT...2016-05-19
- 针对帝国CMS7.0:有得同学开启了后台登陆验证码,但是由于种种原因后台验证码没有显示,然而不填写验证码又无法登陆后台关闭后台验证码,墨鱼给同学们一个解决方案用工具(一定要用工...2016-05-08
- 因为帝国CMS 7.0信息页不再有ztid字段,所以直接是查询不到的,但是可以用灵动标签sql调用,具体调下方法如下:灵动标签sql调用:select ztid from phome_enewsztinfo where classid=...2015-12-30
- 任意页面动态调用购物车数量,不用刷新数据。 同时适用于帝国CMS6.6、7.0 新建一个buycarjs.php文件放在/e/shopsys/buycar/下,代码如下: <?phprequire("../../class/co...2016-05-19