百度地图(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.下列说法错误的是:自定义图标之后,地图上标注点就会直接显示自定义的图标

目录
相关文章
|
19天前
|
算法 前端开发 Java
数据结构与算法学习四:单链表面试题,新浪、腾讯【有难度】、百度面试题
这篇文章总结了单链表的常见面试题,并提供了详细的问题分析、思路分析以及Java代码实现,包括求单链表中有效节点的个数、查找单链表中的倒数第k个节点、单链表的反转以及从尾到头打印单链表等题目。
28 1
数据结构与算法学习四:单链表面试题,新浪、腾讯【有难度】、百度面试题
|
11天前
|
人工智能
|
2月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
34 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
25 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
2月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
31 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
2月前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法,包括横向和纵向滚动条的控制,但遇到了设置不生效的问题,可能与软件版本有关。
32 2
Twaver-HTML5基础学习(36)是否显示滚动条
|
2月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
34 1
前端基础(十七)_HTML5新特性
|
2月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
34 5
|
2月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
35 1
|
20天前
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
21 0