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

时间：2021-09-05 03:28:40

上午研究了下一些网站都已经实现好的地区、公交、线路等等一些基于“地图”的服务，这些服务都是基于诸如百度、谷歌地图服务接口下的二次开发，百度地图接口服务免费，而且开发文档,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、其他功能，诸如搜索地名，公交路线等等，请参考帮助文档，还是比较详细的
标签：

相关文章