HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(上)

简介: HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)

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



百度地图提供了一套由JavaScript语言编写的应用程序接口,该套接 口目前最新版本为 JavaScript API GL v1.0 。 使用这些接口我们就可以在页面上构建功能丰富、交互性强的地图应用。


接口使用方法:


1、注册百度账号

https://lbsyun.baidu.com/


2、 申请成为百度开发者


3、 获取服务密钥


4 、使用服务相关功能


百度地图_初始化



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); //开启鼠标滚轮缩放


百度地图_变更地图类型


        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)//设置地图类型为地球


百度地图_添加控件



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


1、完成地图初始化


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


添加比例尺控件

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


添加缩放控件

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


添加城市列表控件

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


添加定位控件

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


HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下):https://developer.aliyun.com/article/1420272

目录
相关文章
|
18天前
|
XML JavaScript 前端开发
如何解析一个 HTML 文本
【10月更文挑战第23天】在实际应用中,根据具体的需求和场景,我们可以灵活选择解析方法,并结合其他相关技术来实现高效、准确的 HTML 解析。随着网页技术的不断发展,解析 HTML 文本的方法也在不断更新和完善,
|
28天前
|
人工智能
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
31 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
1月前
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
404 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
|
2月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
38 1
|
1月前
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
25 0
|
1月前
html基础知识学习
html基础知识学习
31 0
|
11天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
34 1
[HTML、CSS]细节与使用经验
|
12天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
27 1
[HTML、CSS]知识点

热门文章

最新文章