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

目录
相关文章
|
17天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
1月前
|
JavaScript
自定义全能搜索HTML源码
自定义全能搜索HTML源码
25 1
自定义全能搜索HTML源码
|
1月前
|
前端开发 开发者 容器
|
12天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
19 1
|
21天前
|
前端开发 JavaScript
HTML深度解析:更改文本颜色
【4月更文挑战第1天】
42 0
HTML深度解析:更改文本颜色
|
25天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
数据安全/隐私保护
HTML表单(Form)常用控件
HTML表单(Form)常用控件。
15 1
|
1月前
|
移动开发 前端开发 JavaScript
HTML语言基础知识入门
HTML语言基础知识入门
|
1月前
HTML文本内容标签
HTML文本内容标签
|
1月前
|
存储 移动开发 编解码
html5的新特性详解
HTML5是构建和呈现互联网内容的语言描述方式,HTML5在HTML4的基础上增加了许多新特性,使其更具语义化、更加标准化,同时也提高了用户体验和开发效率。以下是HTML5的部