使用百度地图接口实现自定义网页地图开发实现

上午研究了下一些网站都已经实现好的地区、公交、线路等等一些基于“地图”的服务,这些服务都是基于诸如百度、谷歌地图服务接口下的二次开发,百度地图接口服务免费,而且开发文档,API介绍详细,所以本文暂先介绍如何调用百度地图服务(API)

http://developer.baidu.com/service#dev       百度开发者中心,进去之后能够看见baiduMap API的帮助文档,文档不错,比较详细,一般参阅此文档基本上能应付一般的需求了,

编程步骤也较为简单:

js代码:

[javascript]  view plain copy
  1. <span style="font-size:18px;">var map;  
  2. function initMap(){  
  3.     map = new BMap.Map("mapBox"); // 创建地图实例   
  4.     var point = new BMap.Point(116.404,39.915); // 创建点坐标   
  5.     map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别  
  6. }  
  7. function search(){  
  8.     var areaName = $("area").value;  
  9.     if(areaName=="")return;  
  10.     if(map==null){  
  11.         init();  
  12.     }  
  13.     var local = new BMap.LocalSearch(map,{     
  14.          renderOptions:{map:map}     
  15.     });     
  16.     local.search(areaName);     
  17. }  
  18. function $(id){  
  19.     return document.getElementById(id);  
  20. }</span>  

html代码:

[html]  view plain copy
  1. <span style="font-size:16px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>地图搜索</title>  
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  7. <script type="text/javascript" src="js/map.js"></script>  
  8. </head>  
  9. <body onload="initMap();">  
  10.     <div id="operator">  
  11.         <form action="#">  
  12.             位置:<input type="text" name="area" id="area" style=""/>  
  13.             <br/>  
  14.             <input type="button" onclick="search();" id="searchBtn" value="搜索此位置">  
  15.         </form>  
  16.     </div>  
  17.     <div id="mapBox" style="width:500px;height:500px;background-color:navy;position:absolute;left:240px;top:10px;"></div>  
  18. </body>  
  19. </html></span>  

解释:

      1、页面中引入百度js API

[html]  view plain copy
  1. <span style="font-size:18px;"><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script></span>  
       2、要为地图显示指定容器,一般为div

[html]  view plain copy
  1. <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代码中创建地图对象(指定容器)

[javascript]  view plain copy
  1. <span style="font-size:18px;">map = new BMap.Map("mapBox");   
  2. var point = new BMap.Point(116.404,39.915);   
  3. map.centerAndZoom(point,15); //初始化  
  4. </span>  
         4、其他功能,诸如搜索地名,公交路线等等,请参考帮助文档,还是比较详细的

你可能感兴趣的:(地图,百度地图,地图开发,地图API)