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

目录
相关文章
|
2月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
53 1
利用html2canvas插件自定义生成名片信息并保存图片
|
3月前
|
人工智能
|
4月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
55 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
4月前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
55 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
4月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
52 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
4月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
41 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
4月前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法,包括横向和纵向滚动条的控制,但遇到了设置不生效的问题,可能与软件版本有关。
42 2
Twaver-HTML5基础学习(36)是否显示滚动条
|
4月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
49 5
|
4月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
55 1
|
3月前
html基础知识学习
html基础知识学习
40 0