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

最新推荐文章于 2023-04-11 12:16:22 发布

竹林幽深

最新推荐文章于 2023-04-11 12:16:22 发布

阅读量1.8k

点赞数

分类专栏：百度地图地图 api 文章标签：百度地图地图api 地图开发地图

地图 api 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

百度地图

8 篇文章 0 订阅

订阅专栏

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

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

编程步骤也较为简单：

js代码：

[javascript]view plaincopy 
   
 <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代码：

[html]view plaincopy 
   
 <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

[html]view plaincopy 
   
 <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 plaincopy 
   
 <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 plaincopy 
   
 <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、其他功能，诸如搜索地名，公交路线等等，请参考帮助文档，还是比较详细的

竹林幽深

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用百度地图接口实现自定义网页地图开发实现

上午研究了下一些网站都已经实现好的地区、公交、线路等等一些基于“地图”的服务，这些服务都是基于诸如百度、谷歌地图服务接口下的二次开发，百度地图接口服务免费，而且开发文档,API介绍详细，所以本文暂先介绍如何调用百度地图服务（API）http://developer.baidu.com/service#dev 百度开发者中心，进去之后能够看见baiduMap API的帮助文档，文
复制链接

扫一扫