[WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程
高德地图WEB开发（key申请、api）简约教程
<title>基本地图展示</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
2.高德地图js实例化启动地图
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [116.397428, 39.90923]
});
3.完整的基础地图展示（代码来源于高德地图AI）
<!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="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div> <script>
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [116.397428, 39.90923]
}); </script>
</body>
</html>
<!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="http://cache.amap.com/lbs/static/main1119.css"/>
<style type="text/css">
#panel {
position: absolute;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true
});
AMap.service(["AMap.PlaceSearch"], function() {
var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize: 5,
pageIndex: 1,
city: "010", //城市
map: map,
panel: "panel"
});
//关键字查询
placeSearch.search('北京大学');
});
</script>
</body>
</html>
5.驾车路线规划（根据起点终点）
<!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="http://cache.amap.com/lbs/static/main1119.css"/>
<style type="text/css">
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.Driving"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
//基本地图加载
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 13 //地图显示的缩放级别
});
//构造路线导航类
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));
</script>
</body>
</html>
6.实时路况
<body>
<div id="container"></div>
<div class="button-group">
<input type="button" class="button" id="control" value="显示/隐藏实时路况"/>
</div>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13
});
//实时路况图层
var trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10
});
trafficLayer.setMap(map); var isVisible = true;
AMap.event.addDomListener(document.getElementById('control'), 'click', function() {
if (isVisible) {
trafficLayer.hide();
isVisible = false;
} else {
trafficLayer.show();
isVisible = true;
}
}, false);
</script>
</body>
7.3d楼层
<body>
<div id="container"></div>
<div id="tip"></div>
<script>
var map = new AMap.Map("container", {
resizeEnable: true,
center: [121.498586, 31.239637],
zoom: 17
});
if (document.createElement('canvas') && document.createElement('canvas').getContext && document.createElement('canvas').getContext('2d')) {
// 实例化3D楼块图层
var buildings = new AMap.Buildings();
// 在map中添加3D楼块图层
buildings.setMap(map);
} else {
document.getElementById('tip').innerHTML = "对不起，运行该示例需要浏览器支持HTML5！";
}
</script>
</body>
8.卫星图
<!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="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var map = new AMap.Map('container', {
center: [116.397428, 39.90923],
layers: [new AMap.TileLayer.Satellite()],
zoom: 13
});
</script>
</body>
</html>
[WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程的更多相关文章
- web开发调用百度地图API + AK申请
web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...
- 百度地图和高德地图结合在web中的使用（二）
百度地图在web中的使用(二) 背景:在做一个关于地理位置字段时,初始位置使用百度地图获取时失败,获取的位置信息不准确,奈何产品说友商好使的啊,F12看后是采用的高德,所以在这采用高德地图获取初始位置 ...
- arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core
百度地图和高德地图坐标系的互相转换 GPS.谷歌.百度.高德坐标相互转换 一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...
- 几个地图（高德、百度、Apple、Google）URL API
移动应用中,如何在自己的App中调起第三方的原生地图App,并显示相关的信息,如显示指定的一个坐标位置,显示一个起点到终点的路线查询,等等. 目前几个主要的地图商都提供了自己的App通过URL调用的形 ...
- 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
- 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...
- 【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
- 【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘
原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...
随机推荐
- Windows下的Nginx安装与配置(PHP)
因为一直用Apache作为服务器,对Apache的使用和配置已经相对熟悉,今天换了一下nginx的服务器,整个配置流程相对比较简单,php的配置没有任何变化. 主要的参考文档为 http://blog ...
- 话谈C#第二天
今天做了几个小小的练习,和大家分享一下. 1.用*打印出等腰三角形,代码如下: static void Main(string[] args) { int n = 5; for (int i = 1; ...
- JavaScript把函数作为另一函数的参数
首先说一下这个问题是怎么产生的:今天看排序算法,想要比较不同的排序算法的时间花费. 最简单的时间统计方法是在程序块开始和结束时分别计时,求一下时间差就能得出该段代码的耗时. 如: var foo = ...
- Docker学习--docker的基本认识
1.Docker 架构 Docker 使用客户端-服务器 (C/S) 架构模式,使用远程API来管理和创建Docker容器. Docker 容器通过 Docker 镜像来创建. 容器与镜像的关系类似于 ...
- Linux实用指令
Linux实用指令 Rpm&Yum 一种用于互联网下载包的打包和安装工具,它包含某些Linux分发版中,它生产具有 .rpm 扩展名的文件.RPM 是 RedHat Package Man ...
- Android 开发工具类 26_getFile
从网络获取可执行文件 public void getFile() throws Exception{ // 首先得到请求的路径 String urlpath = "http://ftpcnc ...
- Ubuntu14.04安装之后的一些配置
不多说,直接上干货! 主要分为 一.root用户的开启和vim编辑器的安装 二.ssh的安装 三.静态ip的设置 四.中英切换文环境切换 一.root用户的开启和vim编辑器的安装 Ubuntu在默认 ...
- centos下kubernetes+flannel部署（旧）
更合理的部署方式参见<Centos下Kubernetes+Flannel部署(新)> 一.准备工作 1. 三台centos主机 k8s(即kubernetes,下同)master: 10. ...
- 解惑《你必须知道的.net》——C#继承关系中【方发表】的创建和调用
前言: 现在正在读<你必须知道的.net>(第二版)一书,看到IL语言那一章,将call.callvirt和calli时候,书中举了一个例子,是一个三层继承的例子,我一开始看的时候就有点懵 ...
- springboot-15-启动时加载数据的方法CommandLineRunner
有时需要爱项目启动时, 去加载一些配置文件什么的, 可以使用监听器的方式加载, 这是可以通过实现接口 CommandLineRunner来实现需求: Spring Boot应用程序在启动后,会遍历Co ...