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

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

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

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

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

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

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

<span style="color:#170">&lt;tr</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;td</span> <span style="color:#00c">width</span>=<span style="color:#a11">&rsquo;16%&rsquo;</span> <span style="color:#00c">height</span>=<span style="color:#a11">25</span> <span style="color:#00c">bgcolor</span>=<span style="color:#a11">&rsquo;ffffff&rsquo;</span><span style="color:#170">&gt;</span>标注地图<span style="color:#170">&lt;/td</span><span style="color:#170">&gt;</span><br /><span style="color:#170">&lt;td</span> <span style="color:#00c">bgcolor</span>=<span style="color:#a11">&rsquo;ffffff&rsquo;</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;a</span> <span style="color:#00c">href</span>=<span style="color:#a11">&rdquo;javascript:void(0)&rdquo;</span> <span style="color:#00c">onclick</span>=<span style="color:#a11">&rdquo;showOrHide(1)&rdquo;</span><span style="color:#170">&gt;</span>点击地图标注<span style="color:#170">&lt;/a</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/td</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/tr</span><span style="color:#170">&gt;</span>

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

<span style="color:#170">&lt;style</span><span style="color:#170">&gt;</span><br />.belowdiv{<br />display: none;<br />position: absolute;<br />top: 0%;<br />left: 0%;<br />width: 100% !important; width:100%;<br />height: 100% !important; _height:1024px;<br />background-color: gray;<br />filter:alpha(opacity=20); opacity:0.2;<br />z-index:1001;<br />}<br />.topdiv {<br />display: none;<br />position: absolute;<br />top: 25%;<br />left: 25%;<br />width: 582px;<br />height: 450px;<br />padding: 16px;<br />border-top:solid,16px,red;<br />border-left:1px;<br />border-right:1px;<br />border-bottom:1px;<br />background-color: white;<br />z-index:1002;<br />overflow: auto;<br />}<br /><span style="color:#170">&lt;/style</span><span style="color:#170">&gt;</span><br /><span style="color:#170">&lt;script</span> <span style="color:#00c">type</span>=<span style="color:#a11">&quot;text/javascript&quot;</span><span style="color:#170">&gt;</span><br />function showOrHide(flag) {<br />if(flag == 1) {<br />document.getElementById(&quot;top&quot;).style.display = &quot;block&quot;;<br />document.getElementById(&quot;below&quot;).style.display = &quot;block&quot;;<br />}<br />if(flag == 2) {<br />document.getElementById(&quot;top&quot;).style.display = &quot;none&quot;;<br />document.getElementById(&quot;below&quot;).style.display = &quot;none&quot;;<br />}<br />}<br /><span style="color:#170">&lt;/script</span><span style="color:#170">&gt;</span><br /><span style="color:#170">&lt;div</span> <span style="color:#00c">id</span>=<span style="color:#a11">&quot;top&quot;</span> <span style="color:#00c">class</span>=<span style="color:#a11">&quot;topdiv&quot;</span><span style="color:#170">&gt;</span><br />当前坐标:&#091;!--map_x--] &ndash; &#091;!--map_y--] 缩放:&#091;!--map_z--] <span style="color:#219">&amp;nbsp;</span><span style="color:#219">&amp;nbsp;</span><span style="color:#170">&lt;a</span> <span style="color:#00c">href</span> = <span style="color:#a11">&quot;javascript:void(0)&quot;</span> <span style="color:#00c">onclick</span> = <span style="color:#a11">&quot;showOrHide(2)&quot;</span><span style="color:#170">&gt;</span>提交<span style="color:#170">&lt;/a</span><span style="color:#170">&gt;</span><br /><span style="color:#170">&lt;div</span> <span style="color:#00c">style</span>=<span style="color:#a11">&quot;width:520px;height:340px;border:1px solid gray&quot;</span> <span style="color:#00c">id</span>=<span style="color:#a11">&quot;container&quot;</span><span style="color:#170">&gt;</span><br /><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span><br /><span style="color:#170">&lt;script</span> <span style="color:#00c">type</span>=<span style="color:#a11">&quot;text/javascript&quot;</span> <span style="color:#00c">src</span>=<span style="color:#a11">&quot;http://api.map.baidu.com/api?v=1.2&quot;</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/script</span><span style="color:#170">&gt;</span><br /><br /><span style="color:#170">&lt;script</span> <span style="color:#00c">type</span>=<span style="color:#a11">&quot;text/javascript&quot;</span><span style="color:#170">&gt;</span><br />var map = new BMap.Map(&quot;container&quot;);<br />var point = new BMap.Point(115.449106, 38.887932);   //初始位置,我这个是保定可能是css原因,这个坐标位置偏移一点<br />map.addControl(new BMap.NavigationControl());  //鱼骨控件显示<br />map.enableScrollWheelZoom();<br />map.centerAndZoom(point, 14);   //初始缩放级别<br />// 获取经度  纬度<br />map.addEventListener(&quot;click&quot;, function(e){<br />   document.getElementById(&quot;map_x&quot;).value=e.point.lng;<br />  document.getElementById(&quot;map_y&quot;).value=e.point.lat;<br />//下面这行是点击提示语,需要可以去掉 &quot;//&quot;<br />//  alert(&quot;系统已记录您标注的位置坐标&quot;);<br /><br />});<br />// 获取缩放<br />map.addEventListener(&quot;zoomend&quot;, function(){<br />  document.getElementById(&quot;map_z&quot;).value=this.getZoom();<br />});<br />// 设置个默认点,移动这个图标也可以获得坐标。不想要也可以删除<br />var point = new BMap.Point(115.487362, 38.868383);  // 默认标注图标位置<br />var marker = new BMap.Marker(point);        // 创建标注<br />map.addOverlay(marker);    // 将标注添加到地图中<br /><br />var opts = {<br />  width : 250,     // 信息窗口宽度<br />  height: 100,     // 信息窗口高度<br />  title : &quot;温馨提示&quot;  // 信息窗口标题<br />}<br />var infoWindow = new BMap.InfoWindow(&quot;您可以移动此图标到您所在位置或点击您所在的位置,系统会自动获得坐标&quot;, opts);  // 创建信息窗口对象<br /><br />marker.addEventListener(&quot;click&quot;, function(){<br />   this.openInfoWindow(infoWindow);<br />});<br />// 移动获取坐标<br />marker.enableDragging();<br />marker.addEventListener(&quot;dragend&quot;, function(e){<br />  document.getElementById(&quot;map_x&quot;).value=e.point.lng; //移动中心点改变坐标<br />  document.getElementById(&quot;map_y&quot;).value=e.point.lat;<br />//下面这行是移动坐标提示语,需要可以去掉 &quot;//&quot;<br />// alert(&quot;系统已记录您当前位置坐标:&quot; + e.point.lng + &quot;, &quot; + e.point.lat + &quot;&quot;);<br />});<br /><br /><span style="color:#170">&lt;/script</span><span style="color:#170">&gt;</span><br /><br /><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span><br /><br /><span style="color:#170">&lt;div</span> <span style="color:#00c">id</span>=<span style="color:#a11">&quot;below&quot;</span> <span style="color:#00c">class</span>=<span style="color:#a11">&quot;belowdiv&quot;</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span>

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

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

<br />&lt;<span style="color:#000">script</span> <span style="color:#000">type</span>=<span style="color:#000">&rdquo;text</span>/<span style="color:#000">javascript</span><span style="color:#000">&rdquo;</span> <span style="color:#000">src</span>=<span style="color:#000">&rdquo;http</span>:<span style="color:#a50">//api.map.baidu.com/api?v=1.2&Prime;&gt;&lt;/script&gt;</span><br />&lt;<span style="color:#000">div</span> <span style="color:#000">style</span>=<span style="color:#000">&rdquo;width</span>:<span style="color:#164">520</span><span style="color:#000">px</span>;<span style="color:#000">height</span>:<span style="color:#164">340</span><span style="color:#000">px</span>;<span style="color:#000">border</span>:<span style="color:#164">1</span><span style="color:#000">px</span> <span style="color:#000">solid</span> <span style="color:#000">gray</span><span style="color:#000">&rdquo;</span> <span style="color:#000">id</span>=<span style="color:#000">&rdquo;container</span><span style="color:#000">&rdquo;</span>&gt;&lt;<span style="color:#a11">/div&gt;</span><br />&lt;<span style="color:#000">script</span> <span style="color:#000">type</span>=<span style="color:#000">&rdquo;text</span>/<span style="color:#000">javascript</span><span style="color:#000">&rdquo;</span>&gt;<br /><span style="color:#708">var</span> <span style="color:#000">sContent</span> =<br /><span style="color:#000">&ldquo;</span>&lt;<span style="color:#000">h4</span> <span style="color:#000">style</span>=<span style="color:#000">&rsquo;margin</span>:<span style="color:#164">0</span> <span style="color:#164">0</span> <span style="color:#164">5</span><span style="color:#000">px</span> <span style="color:#164">0</span>;<span style="color:#000">padding</span>:<span style="color:#164">0.2</span><span style="color:#000">em</span> <span style="color:#164">0</span><span style="color:#000">&prime;</span>&gt;&#091;!--<span style="color:#000">title</span>--]&lt;<span style="color:#a11">/h4&gt;&rdquo; +</span><br /><span style="color:#000">&ldquo;</span>&lt;<span style="color:#000">img</span> <span style="color:#000">style</span>=<span style="color:#000">&rsquo;float</span>:<span style="color:#000">right</span>;<span style="color:#000">margin</span>:<span style="color:#164">4</span><span style="color:#000">px</span><span style="color:#000">&rsquo;</span> <span style="color:#000">id</span>=<span style="color:#000">&rsquo;imgDemo</span><span style="color:#000">&rsquo;</span> <span style="color:#000">src</span>=<span style="color:#000">&rsquo;</span>&#091;!--<span style="color:#000">titlepic</span>--]<span style="color:#000">&lsquo;</span> <span style="color:#000">width</span>=<span style="color:#000">&rsquo;139</span><span style="color:#000">&prime;</span> <span style="color:#000">height</span>=<span style="color:#000">&rsquo;104</span><span style="color:#000">&prime;</span> <span style="color:#000">title</span>=<span style="color:#000">&rsquo;</span>&#091;!--<span style="color:#000">title</span>--]<span style="color:#000">&lsquo;</span>/&gt;<span style="color:#000">&rdquo;</span> +<br /><span style="color:#000">&ldquo;</span>&lt;<span style="color:#000">p</span> <span style="color:#000">style</span>=<span style="color:#000">&rsquo;margin</span>:<span style="color:#164">0</span>;<span style="color:#000">line</span>-<span style="color:#000">height</span>:<span style="color:#164">1.5</span>;<span style="color:#000">font</span>-<span style="color:#000">size</span>:<span style="color:#164">13</span><span style="color:#000">px</span>;<span style="color:#000">text</span>-<span style="color:#000">indent</span>:<span style="color:#164">2</span><span style="color:#000">em</span>;<span style="color:#000">width</span>:<span style="color:#164">320</span><span style="color:#000">px</span>;<span style="color:#000">&rsquo;</span>&gt;&#091;!--<span style="color:#000">smalltext</span>--]<span style="color:#000">&hellip;</span>&lt;<span style="color:#a11">/p&gt;&rdquo; +</span><br /><span style="color:#000">&ldquo;</span>&lt;<span style="color:#a11">/div&gt;&rdquo;;</span><br /><span style="color:#708">var</span> <span style="color:#000">map</span> = <span style="color:#708">new</span> <span style="color:#000">BMap</span>.<span style="color:#000">Map</span>(<span style="color:#000">&ldquo;container</span><span style="color:#000">&rdquo;</span>);<br /><span style="color:#708">var</span> <span style="color:#000">point</span> = <span style="color:#708">new</span> <span style="color:#000">BMap</span>.<span style="color:#000">Point</span>(&#091;!--<span style="color:#000">map_x</span>--], &#091;!--<span style="color:#000">map_y</span>--]);<br /><span style="color:#708">var</span> <span style="color:#000">marker</span> = <span style="color:#708">new</span> <span style="color:#000">BMap</span>.<span style="color:#000">Marker</span>(<span style="color:#000">point</span>);<br /><span style="color:#708">var</span> <span style="color:#000">infoWindow</span> = <span style="color:#708">new</span> <span style="color:#000">BMap</span>.<span style="color:#000">InfoWindow</span>(<span style="color:#000">sContent</span>); <span style="color:#a50">// 创建信息窗口对象</span><br /><br /><span style="color:#000">map</span>.<span style="color:#000">centerAndZoom</span>(<span style="color:#000">point</span>, &#091;!--<span style="color:#000">map_z</span>--]);<br /><span style="color:#000">map</span>.<span style="color:#000">addOverlay</span>(<span style="color:#000">marker</span>);<br /><br /><span style="color:#000">marker</span>.<span style="color:#000">addEventListener</span>(<span style="color:#000">&ldquo;click</span><span style="color:#000">&rdquo;</span>, <span style="color:#708">function</span>(){<br /><span style="color:#000">this</span>.<span style="color:#000">openInfoWindow</span>(<span style="color:#000">infoWindow</span>);<br /><span style="color:#a50">//图片加载完毕重绘infowindow</span><br /><span style="color:#000">document</span>.<span style="color:#000">getElementById</span>(<span style="color:#000">&lsquo;imgDemo</span><span style="color:#000">&rsquo;</span>).<span style="color:#000">onload</span> = <span style="color:#708">function</span> (){<br /><span style="color:#000">infoWindow</span>.<span style="color:#000">redraw</span>();<br />}<br />});<br />&lt;<span style="color:#a11">/script&gt;</span>

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

最高¥2000红包
限量
云产品通用,可叠加官网常规优惠使用 | 限时领取
相关文章

帝国CMS在js登陆模板中调用当前登陆用户的头像!

阅读 61

打开e/data/template/loginiframetemp.txt 在 $r=$empire-&gt;fetch1("select".$user_use...博文来自:帝国cms教程

帝国cms内容页某个字段没有填写就不显示

阅读 63

<?phpif($navinfor[字段名]){?>字段有值时显示的内容,如[!---字段名--]<?}else{?>字段无...博文来自:帝国cms教程

帝国CMS电影播放页调用上一集、下一集的方法

阅读 53

打开播放器的php文件 在eDownSysplay下 比如 flasher.php 查找这行代码: ViewOnlineKFen($showdown_r,$...博文来自:帝国cms教程

帝国CMS调用最新最多评论文章

阅读 44

用灵动标签调用最新最多评论文章: [e:loop={'select * from [!db.pre!]ecms_news where checked...博文来自:帝国cms教程

帝国CMS灵动标签调用日期时间

阅读 49

灵动标签调用时间默认的代码不行。用以下代码即可: <?=date("Y-m-d H:i:s",$bqr[newsti...博文来自:帝国cms教程

帝国CMS用虚拟主机如何设置伪静态.htaccess规则

阅读 46

帝国CMS建议直接生成静态页,但有时候也确实希望伪静态,这里以 帝国CMS7.0为例。PHP虚拟主机下设置伪静...博文来自:帝国cms教程

帝国CMS比较高效的随机信息调用方法

阅读 42

有时,我们希望调用随机的信息。 可以在生成标签的时候,标签参数中的排序参数用:’rand()’...博文来自:帝国cms教程

帝国CMS在内容模板里控制内容简介smalltext显示字数

阅读 39

帝国CMS的内容简介通常都是自动截取200个字符的。 但有时我们希望在内容模板中不需要显示这么多,只要显...博文来自:帝国cms教程

帝国CMS获取当前栏目地址的栏目目录

阅读 48

比如栏目连接为:http://www.aaa.com/bbb/ccc/ 我现在要获取ccc这个目录名称,那么应该写法如下: <...博文来自:帝国cms教程

帝国CMS 两种方法实现点击更换网站验证码

阅读 38

两种方法实现点击更换网站验证码 今天分享的这个 点击更换任何验证码 适用于 帝国cms各版本 以及 其...博文来自:帝国cms教程

我爱模板网 从零开始学建站,学习技能、解决问题!

每个月,我们帮助开发者解决各种各样的技术问题。并助力他们在技术能力上获得提升。
没有账号? 忘记密码?

社交账号快速登录