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

2024-04-11 14:00:01 96 admin

帝国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 至此，地图标注功能就准备好了。