欢迎来到素材无忧网,按 + 收藏我们
登录 注册 退出 找回密码

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

时间: 2024-02-25 09:27 阅读: 作者:素材无忧网

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

1.jpg

1.jpg

第一步:首先在模型建立三个字段:
字段名:map_x 字段类型:DOUBLE
字段名:map_y 字段类型:DOUBLE
字段名:map_z 字段类型:TINYINT 最好设置个默认值13 14左右,是调整缩放级别的
系统模型该选的都选上,比如录入项、投稿项、可增加、可修改、内容模版。

第二步:修改系统模型表单模版

把这三个字段的代码删除改成:

> width=’16%’ height=25 bgcolor=’ffffff’>标注地图>
bgcolor=’ffffff’> href="javascript:void(0)" onclick="showOrHide(1)">点击地图标注>>
>

然后在底部添加以下代码:

>
.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;
}
>

<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>

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

版权声明: 本站资源均来自互联网或会员发布,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

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

模板推荐