-->

帝国cms添加百度地图标注方法是什么(帝国cms添加百度地图标注方法在哪)

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

第一步:首先在模型中创建三个字段: 字段名称:map_x 字段类型:DOUBLE 字段名称:map_y 字段类型:DOUBLE 字段名称:map_z 字段类型:TINYINT 最好设置一个默认值13到14左右来调整缩放级别选择应为系统模型选择的所有内容,例如条目项、贡献项、可添加、可修改和内容模板。

步骤2:修改系统模型表单模板

删除这三个字段的代码,修改为:

trtd width='16%' height=25 bgcolor='ffffff'标记地图/tdtd bgcolor='ffffff'a href=”javascript:void(0)” onclick=”showOrHide(1)”点击地图标记/a/td/tr 然后在底部添加以下代码:

style.belowdiv{display: 无;position: 绝对;top: 0%;left: 0%;width: 100%!重要;宽度:100%;高度: 100%!重要; _height:1024px;背景颜色:灰色;filter:alpha(不透明度=20); opacity:0.2 ;z-index:1001;}.topdiv {display: 无;position: 绝对;top: 25%;left: 25%;width: 582px;height: 450px;padding: 16px;border-top:solid,16px,red;border- left33 3601px;边框- right:1px;边框-bottom:1px;背景颜色:白色;z-index:1002;overflow: auto;}/stylescript 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 ';文档。 getElementById('below').style.display='none';}}/scriptdiv id='top' class='topdiv'当前坐标: [!--map_x--] [!--map_y--] 缩放:[!--map_z--] nbsp;nbsp;a href='javascript:void(0)' onclick='showOrHide(2)'提交/adiv style='width:520px;height:340px;border:1px 纯灰色' id='container'/divscript type='text/javascript' src='http://api.map.baidu.com/api?v=1.2'/scriptscript type='text/javascript'var map=new BMap.Map('container');var point=新的BMap.Point(115.449106, 38.887932); //初始位置,我的是保定,可能是css的原因,这个坐标位置偏移了一点map.addControl(new BMap.NavigationControl()); //鱼骨控件显示地图。 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 mark=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; //移动中心点改变坐标文档getElementById('map_y').value=e.point.lat;//下面一行是移动坐标提示,需要的话可以去掉'//'//alert('系统已记录您的坐标当前位置坐标:' + e.point.lng + ', ' + e.point.lat + '');});/script/divdiv id='below' class='belowdiv'/div 这样坐标和缩放级别可以存储在数据库中

第三步:调用内容页模板:

脚本类型=”text/javascript” src=”http://api.map.baidu.com/api?v=1.2/scriptdiv style=”width:520px;height:340px;border:1px 纯灰色” id=”container”/divscript type=”text/javascript"var sContent="h4 style='margin:0 0 5px 0;padding:0.2em 0帝国cms添加百度地图标注方法是什么(帝国cms添加百度地图标注方法在哪)/h4" +"img style='float:right;margin:4px' id='imgDemo' src='[ !--titlepic--]' width='139 height='104 title='帝国cms添加百度地图标注方法是什么(帝国cms添加百度地图标注方法在哪)'/” +“p style='margin:0;line-height:1.5;font-size:13px; text-indent:2em;width:320px;'帝国CMS任意模型添加百度地图标注功能。第一步:首先在模型中创建三个字段:字段名称:map_x字段类型:DOUBLE字段名称:map_y字段类型:DOUBLE字段名称:map_z字段类型:TINYINT最好设置一个默认值13到14左右来调整缩放级别选择应为系统模型选择的所有内容,例如条目项、贡献项、可添加、可修改和内容模板。步骤2:修改系…/p” + “/div”;var map=new BMap.Map(“容器”);var point=new BMap.Point([!-- map_x--], [!--map_y--]);var 标记=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移动端)

下一篇: 灵动标签和万能标签(灵动标签和万能标签的区别)

关于搜一搜站长工具

如未标明出处,所有模板均为搜一搜站长工具原创,如需转载,请附上原文地址,感谢您的支持和关注。

关于代售类模板,为网友上传发布,如果有侵犯你的权益,请联系我们,第一时间删除。客服邮箱:3801085100#qq.com(#换成@)

本文地址:http://www.soyiso.net/news/12209.html

展开更多