最近被安排了开发电子地图的差事,以前只听说过百度谷歌等有免费的开源库可供调用,但是没有自己做过具体的东西,现在活既然上面安排了,咱就得学哪,下面我将把我最近自己总结的一些知识与大家分享。(强烈建议大家有分享精神,如果大家都很吝啬自己的知识,你以后上百度,谷歌,CSDN,博客园等地方也将不会看到任何有价值的信息了,这是很可怕的趋势,因为我就是从这些共享的资源里学到了知识。)好了,不废话了,进入主题。
本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章。
1.打开链接http://developer.baidu.com/map/jshome.htm
这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是。进入后有很多方向供你选择,由于现在开源的地图API都是JS脚本写的,所以我上面的链接就只针对JavaScript进行介绍。
即使是编程菜鸟(像我这种),也知道当你在任何一个开发环境下写代码时,都需要加入头文件,例如,你要在C++里使用cout,cin呢就必须要加入include <io.stream>;与这种思维类似,开发电子地图系统也是一样的。你想啊,百度地图都是开发好的,人家能随随便便就把这东西直接给你吗?搞笑呢么。只可能给你一些接口让你去开发。呢么问题就是如何让这些接口有意义呢?比如你现在想在地图上定点一个位置,百度地图里有一个函数就是提供此功能的,setCenter(Point:String);呢么你无论把这句话加在页面的任何一个地方都不会起作用,因为页面根本就不知道这是个什么东西,这时就要加入API库的链接:
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
这个链接就好比给setCenter(Point:String)加了一个头文件。其实这很简单,而我这么介绍是因为我几乎就没学过什么HTML,CSS,JS,WEB啊,基本都是靠自己的理解去现学现用的,就拿JS来说我都没有任何基础,直接拿其他语言的语法去些的,遇到什么问题就去搜JS的函数定义啊,什么特殊的事件等等。所以原谅我这么罗嗦的介绍,只为给像我一样的小白说的更清楚。下面解释一下这个链接:
api:该链接为百度地图api库
v=1.4:库的版本为1.4版本,是目前最高的
以前百度API开放的时候是需要注册KEY的,现在就不需要,所以使用起来更简单了。另外提一点,在参考百度的DEMO时要注意这个版本,现在比如V=1.2和V=1.4在有些功能上有些偏差,而且有的函数在某些版本里可能有,在高级版本里已经废弃了。
2.以百度提供的DEMO为例,入门介绍
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>百度地图的Hello, World</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(); //启用滚轮放大缩小
</script>
---------------------------------------------------------------------------
将上面的页面复制下来,保存为.html文件,然后运行该静态页面将会显示一张任何功能都没有,但却和百度地图一样的页面。
若不能显示或者是出现乱码,则用以下办法解决:
1.当你保存txt文件时采用默认编码格式(ANSI),则在上述代码中将编码格式改为charset="gb2312";若还不能显示,则查看是不你的浏览器的问题,在internet工具,选项里找到“禁用脚本提示”,看是否打钩了。
2.保存txt文件时选择编码格式为utf-8,则上面的代码就能正常显示(推荐此编码,不解释)。
由于在写篇文章时CSDN博客刚好在维护,所以是先在txt里写的,版式若不好莫怪啊。
下一篇我将介绍如何利用上述代码进行二次开发。