上午研究了下一些网站都已经实现好的地区、公交、线路等等一些基于“地图”的服务，这些服务都是基于诸如百度、谷歌地图服务接口下的二次开发，百度地图接口服务免费，而且开发文档,API介绍详细，所以本文暂先介绍如何调用百度地图服务（API）
http://developer.baidu.com/service#dev 百度开发者中心，进去之后能够看见baiduMap API的帮助文档，文档不错，比较详细，一般参阅此文档基本上能应付一般的需求了，
编程步骤也较为简单：
js代码：
- <span style="font-size:18px;">var map;
- function initMap(){
- map = new BMap.Map("mapBox"); // 创建地图实例
- var point = new BMap.Point(116.404,39.915); // 创建点坐标
- map.centerAndZoom(point,15); // 初始化地图，设置中心点坐标和地图级别
- }
- function search(){
- var areaName = $("area").value;
- if(areaName=="")return;
- if(map==null){
- init();
- }
- var local = new BMap.LocalSearch(map,{
- renderOptions:{map:map}
- });
- local.search(areaName);
- }
- function $(id){
- return document.getElementById(id);
- }</span>
html代码：
- <span style="font-size:16px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>地图搜索</title>
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
- <script type="text/javascript" src="js/map.js"></script>
- </head>
- <body onload="initMap();">
- <div id="operator">
- <form action="#">
- 位置：<input type="text" name="area" id="area" style=""/>
- <br/>
- <input type="button" onclick="search();" id="searchBtn" value="搜索此位置">
- </form>
- </div>
- <div id="mapBox" style="width:500px;height:500px;background-color:navy;position:absolute;left:240px;top:10px;"></div>
- </body>
- </html></span>
解释：
1、页面中引入百度js API
- <span style="font-size:18px;"><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script></span>
2、要为地图显示指定容器，一般为div
- <span style="font-size:18px;"><div id="mapBox" style="width:500px;height:500px;background-color:navy;position:absolute;left:240px;top:10px;"></div></span>
3、在js代码中创建地图对象（指定容器）
- <span style="font-size:18px;">map = new BMap.Map("mapBox");
- var point = new BMap.Point(116.404,39.915);
- map.centerAndZoom(point,15); //初始化
- </span>
4、其他功能，诸如搜索地名，公交路线等等，请参考帮助文档，还是比较详细的
