你的位置:首页 > 网页设计

[网页设计]百度地图的简单使用 ——html js


一、简介

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用,包含了构建地图基本功能的各种接口,提供了诸如本地搜索、路线规划等数据服务。

基本地图功能:展示(支持2D图、3D图、卫星图)、平移、缩放、拖拽等。

地图控件展示功能:可以在地图上添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件,并可以设置各类控件的显示位置。

覆盖物功能:支持在地图上添加/删除点、线、面、热区、行政区划、用户自定义覆盖物等;开源库提供富标注、标注管理器、聚合marker、自定义覆盖物等功能。

工具类功能:提供经纬度坐标与屏幕坐标互转功能;开源库里提供测距、几何运算及GPS坐标/国测局坐标转百度坐标等功能。

定位功能:支持IP定位及浏览器(支持html5特性浏览器)定位功能。

右键菜单功能:支持在地图上添加右键菜单。

鼠标交互功能:支持动态修改鼠标样式、鼠标拖拽/缩放地图及鼠标绘制等功能。

图层功能:支持重设地图底图、地图上叠加实时交通图层或自定义图层功能。

本地搜索功能:包括根据城市、矩形范围、圆形范围等条件进行POI搜索;且支持用户自有数据的检索。

公交检索:支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;检索结果支持便捷、可换乘、少步行、不乘地铁四种方案。

驾车检索:支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;返回最短时间、最短距离、避开高速的驾车导航结果;且提供计算打车费用服务。

步行导航:提供步行导航方案。

逆/地理编码:支持百度坐标与地址描述信息之间的转换服务。

个性化数据展示功能:用户自有数据存储到LBS.云后,JavaScript API可以提供以麻点图形式展示自有数据功能。 

 

二、地图的引入

  创建了一个地图并以天安门作为地图的中心:(秘钥要自己去获取,秘钥获取可参看:http://www.cnblogs.com/0201zcr/p/4675028.html)

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥">//v1.5版本的引用方式:src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"//v1.4版本及以前版本的引用方式:src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"</script></head>  <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container");     // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15);         // 初始化地图,设置中心点坐标和地图级别 </script> </body> </html>

 

解析各个部分的作用:

准备页面

  根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: 

<!DOCTYPE html> 

 

 

  下面我们添加一个meta标签,以便使您的页面更好的在移动平台上展示。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

 

 

  接着我们设置样式,使地图充满整个浏览器窗口: 

<style type="text/css">   html{height:100%}    body{height:100%;margin:0px;padding:0px}    #container{height:100%}  </style>

 

 

引用百度地图API文件 使用V1.4及以前版本的引用方式:

创建地图容器元素地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。

命名空间 API使用BMap作为命名空间,所有类均在该命名空间之下,比如:BMap.Map、BMap.Control、BMap.Overlay。

创建地图实例

var map = new BMap.Map("container");

 

 

  位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

  注意在调用此构造函数时应确保容器元素已经添加到地图上。

创建点坐标

var point = new BMap.Point(116.404, 39.915);

 

 

这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中116.404表示经度,39.915表示纬度。

地图初始化

map.centerAndZoom(point, 15);

  在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。 

地图配置与操作

  地图被实例化并完成初始化以后,就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。 比如,默认情况下地图不支持鼠标滚轮缩放操作,因为这样可能会影响整个页面的用户体验,但是如果您希望在地图中使用鼠标滚轮控制缩放,则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考的配置方法一节中找到。

  此外,您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如:setCenter()、panTo()、zoomTo()等等。

下面示例显示一个地图,等待两秒钟后,它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。  

var map = new BMap.Map("container");  var point = new BMap.Point(116.404, 39.915);  map.centerAndZoom(point, 15);  window.setTimeout(function(){   map.panTo(new BMap.Point(116.409, 39.918));  }, 2000);

 

三、效果图