文档章节

百度地图的简单使用 ——html js

风灬云
 风灬云
发布于 2015/07/27 15:01
字数 1575
阅读 44
收藏 0

一、简介

百度地图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);

 

三、效果图

 

本文转载自:http://www.cnblogs.com/0201zcr/p/4679444.html

风灬云
粉丝 20
博文 91
码字总数 30310
作品 1
西宁
技术主管
私信 提问
百度地图API入门——(5)百度地图API的简介

在一点使用经验都没有的时候,看简介,只能有些许的知晓作用。还是在写了几个超简单程序后,再回头看,比较有意义。 1. 谁用? 百度地图API是给JavaScript开发人员使用的。 2. 兼容性呢? 说...

晨曦之光
2012/04/24
600
0
如何用不到200行代码写一款属于自己的js框架

前言 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这样的框架。我们将会学到如下知识点: ...

徐小夕
07/05
0
0
用curl抓取百度搜索结果排名不准啊,有几个问题我想问,麻烦各位帮帮忙啦

1.百度推广的html是js追加的吗?怎么用curl抓取的和直接打开百度输入关键看到的不一样,curl看到的少一点 2.假如是js追加的为什么有些用curl能抓取到的,很奇怪,不是只会抓取到html吗 3.抓去...

蓝天梦
2015/07/28
625
1
用javascript调用搜狗地图实现景点的显示

由于课程需要,最近做了搜狗地图服务的接入工作,要在地图上标注出景点位置,现略做总结,以备查阅。(部署该服务到Tomcat中的时候中文总是乱码,纠结了半天,最后不得不show in Eclipse) ja...

walk273
2013/05/28
298
0
2019 前端面试 | 知其然,并知其所以然

Web 前置知识 《老生常谈的从 URL 输入到页面展现背后发生的事》[编号:web01] 《初次接触前端,我们要理解哪些名词?》 《工欲善其事,必先利其器——软件安装、环境搭建》 《做一次山大王,...

itsOli
05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
5
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0
栈-链式(c/c++实现)

上次说“栈是在线性表演变而来的,线性表很自由,想往哪里插数据就往哪里插数据,想删哪数据就删哪数据...。但给线性表一些限制呢,就没那么自由了,把线性表的三边封起来就变成了栈,栈只能...

白客C
今天
43
0
Mybatis Plus service

/** * @author beth * @data 2019-10-20 23:34 */@RunWith(SpringRunner.class)@SpringBootTestpublic class ServiceTest { @Autowired private IUserInfoService iUserInfoS......

一个yuanbeth
今天
5
0
php7-internal 7 zval的操作

## 7.7 zval的操作 扩展中经常会用到各种类型的zval,PHP提供了很多宏用于不同类型zval的操作,尽管我们也可以自己操作zval,但这并不是一个好习惯,因为zval有很多其它用途的标识,如果自己...

冻结not
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部