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

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

如果想用百度地图api,首先需要先获取一个百度地图api的密钥,然后引入百度地图的api,接下来,我们详细介绍下获取、引入api密钥的技巧,以及通过代码给大家详解下百度地图api如何使用,具体请看下文。

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

首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥。

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

申请密钥很简单,在百度地图api的首页就有相关链接,填写相关信息百度就会给你一个密钥了。

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

接下来,就是引入百度地图的api

trtd width=16% height=25 bgcolor=ffffff标注地图/tdtd bgcolor=ffffffa 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;}/stylescript type=text/javascriptfunction 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;}}/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 solid gray id=container/divscript type=text/javascript src= type=text/javascriptvar 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/divdiv id=below class=belowdiv/div

复制代码 代码如下:var map = new BMap.Map;
// 创建地图实例var point = new BMap.Point; //
创建点坐标map.centerAndZoom;//map.centerAndZoom;//map.centerAndZoom;
这里需要说明三点:

这样就可以把坐标和缩放级别存储于数据库了

澳门新葡亰3522平台游戏,1.map.centerAndZoom方法创建地图,第一个参数可以是根据之前创建好的一个点为中心,创建出地图,也可以根据城市地区的中文名称创建地图。(如果拼写正确,可以根据城市的英文名称来创建)

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

  1. map.centerAndZoom第二个参数是地图缩放级别,最大为19,最小为0。
script type=text/javascript src=;/scriptdiv style=width:520px;height:340px;border:1px solid gray id=container/divscript type=text/javascriptvar 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);//图片加载完毕重绘infowindowdocument.getElementById(imgDemo).onload = function (){infoWindow.redraw();}});/script

3.BMap.Map方法创建地图时候需要一个容器,填写相关容器的id。

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

关于地图大小:

复制代码 代码如下:map.setZoom();

方法主动控制地图大小级别。

复制代码
代码如下:map.enableScrollWheelZoom;

利用鼠标滚轮控制大小。

百度地图提供了非常丰富的功能空间共我们使用。

1.Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。

2.NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方。