拙言的技术博客
像琥珀一样珍藏技术文档!

HDwiki增加百度地图API

HDwiki 曾经名极一时的中文wiki系统,但是由于长时间官方没有更新迭代版本,所以很多功能不能满足现在的需求,例如地图功能,HDwiki自带地图功能,但是使用的是谷歌地图,由于国内无法使用,现状简单使用百度地图API实现简单的地图功能.

  1. 注册百度地图开发者账号,并获取秘钥
  2. 插入头部代码:view/default/header.htm
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap  {width: 100%;height: 500px;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

3.插入词条浏览页代码:view/default/viewdoc.htm

<div id="allmap">

      <script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(116.331398,39.897445);
            map.centerAndZoom(point,12);
            // 创建地址解析器实例
            var myGeo = new BMap.Geocoder();
            // 将地址解析结果显示在地图上,并调整地图视野
            myGeo.getPoint("{$navtitle}", function(point){
            if (point) {
            map.centerAndZoom(point, 16);
            map.addOverlay(new BMap.Marker(point));
            }
            else{
            alert("您选择地址没有解析到结果!");
            }
            }, "北京市");
            //默认定位在北京
      </script>

{$navtitle}标签代表当前词条,北京市改为其他地名就可以把默认地点更改!

实现效果,地图会根据词条名展示地图,如词条名不能被识别为地名或地图数据库无此地名,则展示默认当前城市地图。
展示是比较智能的,如“组”,会智能逐级向前识别。

转载请注明出处:Hoopo | 琥珀 » HDwiki增加百度地图API

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址