html页面调用高德地图,html前端使用高德地图入门教程
文章目录开始准备工作注册Key前期页面上的准备插件使用插件使用步骤引入插件定位自定义地图显示位置和缩放级别添加实时路况图层获取定位信息(需要使用插件)浏览器定位IP定位获取当前城市信息覆盖物添加覆盖物获取覆盖物覆盖物的操作图层设置图层获取图层移除图层3D地图未完待续...
开始
准备工作
注册Key
如果开发者账号包括Key已经有了,请忽略此步骤
首先,注册开发者账号,成为高德开放平台开发者
登陆之后,在进入「应用管理」 页面「创建新应用」
为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
记住这个Key,等会要用,以后可能也会用,一定要记住。
前期页面上的准备
此时距离你的页面上出现地图,已经更近了一步
新建一个DIV,作为地图的容器(这一步和使用其他插件一样,必须新建一个挂载点)。
给这个新建的div设置好宽高(这里提醒一下,可以使用弹性布局,没有影响)。
在body后面引入高德地图的js。
最后,异步初始化高德地图插件,一定要异步,使用window.onLoad。
//新建一个容器
//设置宽和高
#wrapper{
width: 500px;
height: 500px;
}
//引入js
* 这里需要刚才申请的Key
//初始化地图插件
window.onload = function(){
var map = new AMap.Map('wrapper');
}
好了,现在你的页面上已经出现了高德地图
插件使用
地图本身功能有限,很多地方需要使用插件满足自己的需求
插件使用步骤
引入插件
创建插件实例
调用插件方法
引入插件
1.异步引入插件(推荐这种)
//引入单个插件
AMap.plugin('AMap.ToolBar',function(){//异步加载插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
});
//引入多个插件
AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
var driving = new AMap.Driving();//驾车路线规划
driving.search(/*参数*/)
});
2.同步引入插件(不推荐使用,就不讲了)
定位
如果在地图初始化时不配置中心点,和缩放级别,这个时候地图上面默认是你所处的位置,缩放级别也是默认的
PC端默认是IP定位,如果IP定位无法使用则会自动切换到浏览器定位
移动端默认是浏览器定位,如果浏览器定位无法使用则会自动切换到IP定位
自定义地图显示位置和缩放级别
//对于地图的自定义,属性有很多,只列举三个
var map = new AMap.Map('container', {
zoom:11,//缩放级别
center: [116.397428, 39.90923],//地图显示中心点坐标,如果没有center属性,则会定位到你当前所处的位置
viewMode:'3D'//使用3D视图
});
添加实时路况图层
//实时路况图层
var trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10
});
map.add(trafficLayer);//添加图层到地图
获取定位信息(需要使用插件)
浏览器定位
map.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: 'RB'
})
geolocation.getCurrentPosition()
AMap.event.addListener(geolocation, 'complete', onComplete)
AMap.event.addListener(geolocation, 'error', onError)
function onComplete (data) {
// data是具体的定位信息
}
function onError (data) {
// 定位出错
}
})
IP定位获取当前城市信息
AMap.plugin('AMap.CitySearch', function () {
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功,result即为当前所在城市信息
}
})
})
覆盖物
目前只用到点标记,所以暂时只讲点标记
添加覆盖物
点标记
使用点标记肯定都是自定义点标记,可以自定义图片,字体等
var marker = new AMap.Marker({ //添加自定义点标记
map: map,
position: [116.397428, 39.90923], //基点位置
offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置
draggable: true, //是否可拖动
content: '
});
//可以使用css对content里面的dom元素设置样式
灵活点标记
标记大小会随着地图缩放跟着变化
导航,导航同样属于覆盖物范围
//导航需要一个起点和终点
var driving = new AMap.Driving({
map: map,
panel: "panel"
});
// 根据起终点经纬度规划驾车导航路线
driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719));
海量点标记MassMarks
海量点标记不是普通的覆盖物,它实际上是由海量点组成的一个图层
对于1000个以上的点标记,强烈建议海量点,相当于减少dom操作,极大的提升了浏览器性能
// 创建样式对象
var styleObject = new AMap.StyleObject({
url: '//vdata.amap.com/icons/b18/1/2.png', // 图标地址
size: new AMap.Size(11,11), // 图标大小
anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量,基准点为图标左上角
});
// 创建海量点
var massMarks = new AMap.MassMarks({
zIndex: 5, // 海量点图层叠加的顺序
zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
style: styleObject // 设置样式对象
});
// 海量点信息
var data = [{
lnglat: [116.405285, 39.904989], //点标记位置
name: 'beijing',
id:1
}, // {}, …,{}, …
];
massMarks.setData(data);
// 将海量点添加至地图实例
massMarks.setMap(map);
获取覆盖物
//获取所有的覆盖物(点标记,导航等)
that.map.getAllOverlays();
//获取所有的点标记
that.map.getAllOverlays('marker');
这里获取所有的点标记或覆盖物,意思是地图上面所有的添加的点标记或者覆盖物,而不是当前视野范围内的点标记或者覆盖物,如果有需求是获取当前视野范围内的点标记或覆盖物,就需要自己根据这个方法写了。具体什么方法,如果有想了解的,请在下方留言。
覆盖物的操作
1.删除所有覆盖物
// 使用clearMap方法删除所有覆盖物
map.clearMap();
2.删除点标记
// 单独移除点标记
map.remove(marker);
3.取消导航
//取消导航覆盖物
driving.clear();
//一般覆盖物都会有隐藏和显示的方法,这个可以极大的优化性能,因为增加和删除覆盖物操作非常浪费性能。
4.覆盖物隐藏
marker.hide();
5.覆盖物显示
marker.show();
图层
设置图层
// 构造官方卫星、路网图层
var layers = [
new AMap.TileLayer.Satellite(),
new AMap.TileLayer.RoadNet()
]
// 地图上设置图层
map.setLayers(layers);
获取图层
//获取图层数据
map.getLayers();
移除图层
// 移除一个图层
// layer1指的是建立图层的变量
map.remove(layer1);
3D地图
var map = new AMap.Map('container', {
pitch:75, // 地图俯仰角度,有效范围 0 度- 83 度
viewMode:'3D' // 地图模式
});
未完待续…
html页面调用高德地图,html前端使用高德地图入门教程相关推荐
- 要web开发精品教程吗?免费一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
- 【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
- 【前端实例代码】Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果~前端开发网页设计基础入门教程~适合初学者~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果!前端开发网页设计基础入门教程!适合初学者~超简单~ 效果图: 完整代码: <!DOCTYPE ht ...
- html页面调用高德地图,html前端使用高德地图入门教程,并在地图上标记位置-Go语言中文社区...
准备工作 注册Key 首先, 登陆之后,在进入「应用管理」 页面「创建新应用」 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 记住这个Key,等会要用,以后可能也会 ...
- 前端框架React Js入门教程【转】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- 写给前端初学者的Vue入门教程
一.web应用开发 Vue是一款优秀的web应用开发框架,使用它可以让我们开发web应用时候更加高效.在学习Vue之前需要先了解一下web应用开发. 什么是web应用?当我们开发web应用时候,我们在 ...
- 最接近原生APP体验的高性能前端框架 Mui的入门教程
因为之前我用vue和uni-app 都开发过h5移动端 但总觉得有点不太流畅 最后还是选择了使用Mui进行app的开发 上手很快 js语法类似jquery的使用 css样式 类似于bootstrap ...
- web前端开发零基础入门教程
端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端 ...
- 前端三剑客之HTML入门教程
目录 1. 认识HTML标签 2. HTML文件基本结构 2.1 运行一个HTML文件 2.2 标签层次结构 3. HTML的常见标签 注释标签 标题标签:h1-h6 段落标签:p 换行标签:br 格 ...
最新文章
- 让瘫痪失语患者「说话」,脑机接口首次从大脑活动解码完整句子,登上新英格兰医学杂志...
- report service常见处理办法
- 轻松创建Silverlight 4开发环境
- 笔记-信息系统安全管理-信息系统安全技术体系
- 关于c++输出中的endl
- 英语期末复习unit 1-2课后习题第一题及背诵段落
- odoo12 日历模块_日历-ODOO ERP界面布局与操作说明|ODOO 13教程
- as my sql 后面加表达式_SQL.WITH AS.公用表表达式(CTE)(转)
- 为什么越来越多的人喜欢自驾游?
- centos mysql gui_mysql gui
- jquery trigger
- 【中间件技术】软件构件与中间件技术学习与实践系列文章汇总目录(持续更新中)
- mysql命令分号_MySql常用命令:注意命令后面的分号!
- 一维码二维码的生成及打印
- AHU 超算中心 指令
- Java岗大厂面试百日冲刺 - 日积月累,每日三题【Day39】—— 数据库6
- events插件的使用
- 国密算法(SM2,SM3,SM4)完善与算法辅助工具开发
- 爱思助手苹果服务器调整,爱思助手怎么改虚拟位置 爱思助手改虚拟位置方法...
- CoolEdit导出片段文件