百度地图(HTML5新特性)-全面详解(学习总结---从入门到深化)(上)

简介: 百度地图提供了一套由JavaScript语言编写的应用程序接口,该套接 口目前最新版本为 JavaScript API GL v1.0 。

百度地图_账号和获取密钥

百度地图提供了一套由JavaScript语言编写的应用程序接口,该套接 口目前最新版本为 JavaScript API GL v1.0 。

使用这些接口我们就可以在页面上构建功能丰富、交互性强的地图应用。

接口使用方法:

    1 注册百度账号 https://lbsyun.baidu.com/

    2 申请成为百度开发者

2345_image_file_copy_691.jpg

2345_image_file_copy_692.jpg2345_image_file_copy_693.jpg

2345_image_file_copy_694.jpg

3、获取服务密钥

4、使用服务相关功能

1.下列描述错误的是: 使用百度地图的接口不需要密钥

百度地图_初始化

2345_image_file_copy_695.jpg 1、引用百度地图API文件

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"></script>

2、创建地图容器元素

<div id="container"></div>

3、创建地图实例,其参数可以是元素id也可以是元素对象

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

4、设置中心点坐标

var point = new BMapGL.Point(116.404,39.915);
//第一个参数为经度,第二个参数为纬度

5、地图初始化,同时设置地图展示级别,地图展示级别范围(1- 21)

map.centerAndZoom(point, 15);
//第一个参数为中心点坐标,第二个参数为地图级别

6、开启鼠标滚轮缩放

map.enableScrollWheelZoom(true); //开启鼠标
滚轮缩放

1.使用哪个方法生成百度地图实例: new BMapGL.Map()

百度地图_变更地图类型

var map = new BMapGL.Map('container')//生成地图实例
        var centerPoint=new BMapGL.Point(116.404, 39.915)//设置地图的中心点
        map.centerAndZoom(centerPoint,1)//初始化地图
        map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
        map.setMapType(BMAP_EARTH_MAP)//设置地图类型为地球

1.使用哪个方法变更地图类型:map.setMapType

百度地图_添加控件

2345_image_file_copy_696.jpg

控件是负责与地图交互的UI元素,百度地图API支持 比例尺、缩放、定位、城市选择列表、版权 。

1、完成地图初始化

2、添加控件, map.addControl(控件实例)

    2.1、添加比例尺控件

     

var scaleCtrl = new BMapGL.ScaleControl();  // 实例化比例尺控件
map.addControl(scaleCtrl);//添加比例尺控件

  2.2、添加缩放控件

     

var zoomCtrl = new BMapGL.ZoomControl();
//实例化控件
map.addControl(zoomCtrl);// 添加缩放控件

2.3、添加城市列表控件

var cityCtrl = new BMapGL.CityListControl();  //实例化控件
map.addControl(cityCtrl);// 添加城市列表控件

2.4、添加定位控件

var locationCtrl=new BMapGL.LocationControl()//实例化控件
map.addControl(locationCtrl)//添加定位控件

1.使用哪个方法可以添加缩放控件:map.addControl(new BMapGL.ZoomControl())

百度地图_改变控件位置

1、控制控件位置

初始化控件时,可提供一个可选参数,是一个json对象,里面有 个属性 anchor 表示控件的停靠位置,即控件停靠在地图的哪个 角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整 自己的位置。

2345_image_file_copy_697.jpg

var scaleCtrl= new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})
//实例化控件的时候可以传递一个可选参数,为一个 json
map.addControl(scaleCtrl)

2、控件位置偏移

除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。

通过 offset 设置。

var scaleCtrl= new BMapGL.ScaleControl({
           anchor:BMAP_ANCHOR_TOP_RIGHT,
           //offset为一个Size的实例,接受的俩个参数分别代表水平方向距离跟垂直方向距离
           offset:new BMapGL.Size(10,10)
       })
  map.addControl(scaleCtrl)//添加比例尺控件

1.用哪个属性设置控件跟地图边界的偏移量:offset

百度地图_添加覆盖物

所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。

1、添加覆盖物: map.addOverlay(覆盖物实例)

  1.1、添加点(标注点)使用的类: Marker

var point = new BMapGL.Point(116.404,39.915);  
var marker = new BMapGL.Marker(point);
// 创建标注点  
map.addOverlay(marker);// 将标注添加到地图中

 1.2、添加多边形

   使用的类: Polygon

   

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
   ], {strokeColor:"blue",strokeWeight:2, strokeOpacity:0.5});
   map.addOverlay(polygon);

2、删除覆盖物: map.removeOverlay(具体覆盖物实例) 或者 map.clearOverlays()

var overlays = map.getOverlays()//获取地图的所有覆盖物
map.removeOverlay(overlays[0])//删除对应的覆盖物
//map.clearOverlays()//删除地图上所有的覆盖物

3、监听覆盖物事件

overlay.addEventListener('事件名称',callback)
marker.addEventListener("click",
function(e){  
    console.log(e)
});

1.使用哪个类创建标注点:Marker

百度地图_自定义标注图标

1、百度地图_自定义标注图标

Icon(url: String, size: Size , opts: IconOptions)

2345_image_file_copy_698.jpg

var myIcon = new BMapGL.Icon("markers.png",new BMapGL.Size(50, 50), //指定放置图标区域的大小
 {  
   //指定地理点跟图标左上角的相对偏移量
    anchor: new BMapGL.Size(10, 25),    
});

2、使用自定义的标注图标创建标注点

// 创建标注对象并添加到地图  
var marker = new BMapGL.Marker(point, { icon: myIcon });
map.addOverlay(marker);

1.下列说法错误的是:自定义图标之后,地图上标注点就会直接显示自定义的图标

目录
相关文章
|
7天前
|
前端开发
从零开始学习前端开发:HTML基础
HTML是前端开发的基础,它是网页内容的结构化描述语言。本文将介绍HTML的基本语法、标签和元素,以及如何使用它们来创建简单的网页。
|
9天前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
9天前
|
移动开发 前端开发 HTML5
【专栏:HTML 基础篇】HTML 入门:从零开始构建你的第一个网页
【4月更文挑战第30天】本文引导初学者从零开始学习HTML,了解这种标记语言用于构建网页的基础知识。通过介绍HTML的基本结构,如文档类型声明、根标签、头部和主体,以及如何添加文本、设置标题、插入图片、创建链接、使用列表、制作表格和设计表单,帮助读者构建第一个网页。同时强调,结合CSS可实现网页的美化。
|
9天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
31 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
9天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
42 0
|
9天前
|
存储 移动开发 API
《HTML 简易速速上手小册》第9章:HTML5 新特性(2024 最新版)
《HTML 简易速速上手小册》第9章:HTML5 新特性(2024 最新版)
11 0
|
9天前
|
移动开发 自然语言处理 前端开发
《HTML 简易速速上手小册》第1章:HTML 入门(2024 最新版)
《HTML 简易速速上手小册》第1章:HTML 入门(2024 最新版)
20 0
|
9天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
23 1
|
XML 数据采集 前端开发
HTML+CSS入门学习
HTML+CSS入门学习
87 0
|
JavaScript 前端开发 Java
【HTML入门】从网页搭建开始学习Java Web开发
今天开始总结学习Java Web,而学习Java Web我们应该先学习一些网页搭建基础的东西,今天我们就先从HTML开始。
【HTML入门】从网页搭建开始学习Java Web开发