[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 ...
随机推荐
- webpack快速入门——如何安装webpack及注意事项
1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...
- [Swift实际操作]七、常见概念-(4)范围CGRect的使用详解
本文将为你演示区域对象CGRect的使用.你可以将区域对象,看作是点对象和尺寸对象的组合 首先导入需要使用到底界面工具框架 import UIKit 然后初始化一个区域对象,它的原点位于(0,0),宽 ...
- 从负数开始 ，跟随别大人脚步 ---java
刚刚毕业 音乐生 目前在做 数据库测试和实施的相关工作 . 1个月前认识了别大人 , 打算边工作 ,边学习java 开启学习之路 . ..340多个G的java视频感觉解压完1T 足够我喝 ...
- python Snakes 库安装
SNAKES : A A Flexible High-Level Petri Nets Library SNAKES是python一个可以用于Petri网的库 python2安装SNAKES库: 在 ...
- Java并发编程实践读书笔记（4）任务取消和关闭
任务的取消 中断传递原理 Java中没有抢占式中断,就是武力让线程直接中断. Java中的中断可以理解为就是一种简单的消息机制.某个线程可以向其他线程发送消息,告诉你“你应该中断了”.收到这条消息的线 ...
- 【DB2】How to resolve SQL20249N the statement was not processed with error
相关链接 https://vinaysdb2blog.blogspot.com/2017/11/how-to-resolve-sql20249n-statement-was-not-processed ...
- webpack处理url资源的配置
webpack处理url资源的配置 1.安装 npm i url-loader -D 2.修改webpack.config.js const path = require('path'); // 启用 ...
- 国内maven仓库地址资源汇总
国内maven仓库地址:阿里云maven仓库,网易163maven仓库,以及其他maven仓库地址. 国内下载maven一般速度都很慢,下载需要很久时间.这里汇总了一些国内的镜像资源 附带pom文件中 ...
- Ethereum 源码分析之框架
accounts 实现了一个高等级的以太坊账户管理 bmt 二进制的默克尔树的实现 build 主要是编译和构建的一些脚本和配置 cmd ...
- spring整合elasticsearch之环境搭建
推荐一个非常好的博客: 点我 // 测试使用docker下启动的es不管用, 在linux下或者windows下运行的es可用 // 进一步测试docker下启动的es链接时, 开启嗅探也链接不上, ...