AMap（高德官方图层）
实现代码：
<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>高德官方图层</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><style>html,body,#container {width: 100%;height: 100%;}.btn{color: yellow;border-width: 2px;width:120px;}.label{font-weight: 700;width:100px}</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width:400px;background-image: linear-gradient(to bottom right, #dd3e54, #6be585);;"><div class="input-item"><label class="label">卫星图层：</label><button class="btn" id="add-satellite-layer" style="margin-right:10px;">添加卫星图层</button><button class="btn" id="remove-satellite-layer">删除卫星图层</button></div><div class="input-item"><label class="label">路网图层：</label><button class="btn" id="add-roadnet-layer" style="margin-right:10px;">添加路网图层</button><button class="btn" id="remove-roadnet-layer">删除路网图层</button></div><div class="input-item"><label class="label">楼块图层：</label><button class="btn" id="add-buildings-layer" style="margin-right:10px;">添加楼块图层</button><button class="btn" id="remove-buildings-layer">删除楼块图层</button></div><div class="input-item"><label class="label">实时交通图层：</label><button class="btn" id="add-traffic-layer" style="margin-right:10px;">添加实时交通图层</button><button class="btn" id="remove-traffic-layer">删除实时交通图层</button></div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>//创建地图var map = new AMap.Map('container', {resizeEnable: true,viewMode:'3D',zoom: 13,center: [116.417796, 39.914398]});// 构造图层var satelliteLayer = new AMap.TileLayer.Satellite();var roadNetLayer = new AMap.TileLayer.RoadNet();var trafficLayer = new AMap.TileLayer.Traffic ();var buildingsLayer = new AMap.Buildings();//批量添加图层map.add([satelliteLayer, roadNetLayer, trafficLayer, buildingsLayer]);//事件绑定document.querySelector("#add-satellite-layer").onclick = function() {map.add(satelliteLayer);}document.querySelector("#remove-satellite-layer").onclick = function() {map.remove(satelliteLayer);}document.querySelector("#add-roadnet-layer").onclick = function() {map.add(roadNetLayer);}document.querySelector("#remove-roadnet-layer").onclick = function() {map.remove(roadNetLayer);}document.querySelector("#add-traffic-layer").onclick = function() {map.add(trafficLayer);}document.querySelector("#remove-traffic-layer").onclick = function() {map.remove(trafficLayer);}document.querySelector("#add-buildings-layer").onclick = function() {map.add(buildingsLayer);}document.querySelector("#remove-buildings-layer").onclick = function() {map.remove(buildingsLayer);}
</script>
</body>
</html>
AMap（高德官方图层）相关推荐
- vue2（webpack）调用amap高德地图及其UI组件
vue2(webpack)调用amap高德地图及其UI组件和标记物 aiprose 个人随笔上线,网址 aiprose.com 点击访问 https://www.aiprose.com/blog/3 ...
- amap 高德 地图打点 地图描点 描点居中 清除打点
amap 高德 地图打点 地图描点 描点居中 清除打点 废话不多say 上代码
- 高德WMTS图层 调用天地图瓦片地图
项目需要展示海外地点标注(且卫星图与标准矢量地图切换),但是高德地图不显示海外地点数据,查了高德的海外LBS服务,是收费的,而且还处于试运行状态,遇到问题还得提工单,比较麻烦. 后来查了查资料,发现天 ...
- 高德地图学习---在高德地图图层上使用google的卫星图
公司要做一个项目要用到卫星图,但是高德地图提供的卫星图有很多地方由于权限问题还有等等一系列问题是显示不全的,拉到比较偏远的地方就显示不了了,而且清晰度也不够,研究了一下并且在网上查看了好多文章之后发现 ...
- amap高德地图利用uri api实现商家名片、去这里的功能
高德地图web api使用过程中,经常需要在地图为某个商家标注marker,自然而然就有了点击marker弹出"导航去商家"的需求. 以前在amap的开发社区一直找这个接口,因为开 ...
- vue异步加载amap高德地图,解决刷新浏览器地图不显示问题
创建amap.js /** 异步创建script标签*/ export default function MapLoader () {return new Promise((resolve, reje ...
- amap高德地图poi附近地址查询
通过给定一个经纬度,获取附近的地理位置信息(附近地址) 1.首先初始化地图 private var aMap: AMap? = nulloverride fun initView() {//初始化地图 ...
- 基于高德地图开发 Web 应用
文章目录 写在前面 为什么选择高德地图?对比腾讯.百度.OpenLayers OpenLayers 腾讯地图 百度地图 高德地图 基本的开发步骤,开始实现自己的地图应用 快速掌握 API 模块.架构. ...
- 项目 - Web地图开发【高德地图API】(二)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
- vue 高德地图 实时路况
先放效果图 1.准备工作 路况信息只需要使用web端即可实现 2.代码部分 (1)在/public/index.html中引入 <script type="text/javascrip ...
最新文章
- RxJava Rxandroid 结合 Retrofit 使用
- 深入浅出理解Javascript原型概念以及继承机制(转)
- C#构造函数、私有构造函数、静态构造函数与构造函数执行顺序
- PHP源码分析-数组
- python使用matplotlib绘制k线图
- java输出链表的值_[剑指offer] 从尾到头打印链表(三种方法) java
- c语言编程蛇形,蛇形矩阵c语言实现
- 《涂抹Oracle—三思笔记之一步一步学Oracle》看书笔记(序言)
- 计算机二级MS office之excel常用函数
- 漫画 前端发展史的江湖恩怨情仇～
- matlab中phantom函数,matlab官网上下的phantom3d不对
- matlab读取图片亮度,Matlab读取BMP位图并显示亮度值三维图
- 什么是SPA，如何实现SPA应用呢？
- 80004005错误代码_win7系统出现错误代码0x80004005该如何解决
- NOIp模拟赛 巨神兵(状压DP 容斥)
- 三本计算机专业考研211,一个三本学渣逆袭211的考研心得
- 再看《英雄本色》：世上已无英雄？
- 谷歌 汽车 android auto link,谷歌将推出Auto Link智能车载系统
- 华为 oj java题库_华为OJ题目：刷题
- proteus8 Professional和keil4联调流水灯程序