高德地图基础教程超详细版
在当前社会,对于地图的使用是很必须的,所以对于程序员来说也是需要掌握的技能,目前主流的又百度地图和高德地图,但是我建议使用高德地图,因为百度地图的API着实不好用吖,不好理解,对于开发人员来说,高德地图是最合适的。不多说,咱们一步一步实现。
1. 准备工作
1.1注册
1.注册开发者账号注册链接
按照步骤一步步注册就好了
1.2创建应用
设置名称and类型
1.3 获取Key
创建好了后就可以得到我们要的Key和密钥了,通过这两个就在前端界面使用了
2. 使用
2.1 创建前端界面
这里我自己创建一个新的页面来演示,如果是自己要放在自己已有的项目界面上的,同样的操作就可以
简简单单一个小页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>地图定位</title><link rel="stylesheet" href="../css/map.css" media="all"><!--记得导入css哈-->
</head>
<body>
<!--创建一个存放地图的容器div,地图就放在这个里面-->
<div id="mapContainer"></div>
<!--在css中去设置这个容器的大小-->
</body>
</html>
css中样式设置:
注意:如果样式写在和html不在同一层的,记得引入html哈
2.2 导入高德地图API
在页面中想要使用其他包的东西的时候,都是要去引入其他的jar的,地图也不例外
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
注意:这里的key值要修改成自己的应用的key值哟
2.4 高德地图使用
在我们想要用哪一种地图定位的时候,可以直接去高德地图API文档里面去选择,也可以直接去高德地图示例直接地可以看到想要的结果,里面有很多类型,看中哪个就可以根据API将其放到自己的项目中
正式开始了噢,这里我们用浏览器精确定位来演示:完整代码见最后,都是一步步来的
- 先创建一个地图对象(根据地图容器的id来噢)
<script>//给地图容器去创建一个map对象,这个对象是高德地图自己有的一个插件完成的,所以可以直接调用//创建AMap.Map对象时如果没有传入center参数,地图将自动定位到您所在城市并显示,// 这就是JS API的初始加载定位:无需传入对应参数就能获取大致的定位信息。以下代码运行后将显示您所在城市的地图:var map = new AMap.Map('container', {resizeEnable: true})
</script>
注意:在这个时候,得到的只是你当前城市的地图,获取不到具体的精确的定位
2.AMap.Geolocation插件获取精确定位
<script>
//=================接上面的==============//如果只是像上面哪个new了一个地图对象,只能得到当前城市的地图,但是不能获取到精确的位置,// 所以这时要通过AMap.Geolocation插件去完成精确定位的服务AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位,默认:truetimeout: 10000, //超过10秒后停止定位,默认:5sbuttonPosition:'RB', //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点});//然后将其精确定位对象给放到地图对象中去map.addControl(geolocation);//调用获取当前定位信息,就可以定位到当前定位了geolocation.getCurrentPosition(function(status,result){//里面可以进行拿到定位后的信息});});
</script>
注意:到这个时候,我们就已经能够成功定位到精确位置了,但是很多时候都要去拿到当前位置的很多具体的信息进行下一步的操作,就比如经纬度呀什么的,所以这时我们就要去解析定位信息了
- 获取当前定位的具体信息进行解析(完整script代码)
<script>//给地图容器去创建一个map对象,这个对象是高德地图自己有的一个插件完成的,所以可以直接调用//创建AMap.Map对象时如果没有传入center参数,地图将自动定位到您所在城市并显示,// 这就是JS API的初始加载定位:无需传入对应参数就能获取大致的定位信息。以下代码运行后将显示您所在城市的地图:var map = new AMap.Map('container', {resizeEnable: true})//如果只是像上面哪个new了一个地图对象,只能得到当前城市的地图,但是不能获取到精确的位置,// 所以这时要通过AMap.Geolocation插件去完成精确定位的服务AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位,默认:truetimeout: 10000, //超过10秒后停止定位,默认:5sbuttonPosition:'RB', //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点});map.addControl(geolocation);//获取geolocation.getCurrentPosition(function(status,result){//里面可以进行拿到定位后的信息});});
</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">var map = new AMap.Map('container', {resizeEnable: true});AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位,默认:truetimeout: 10000, //超过10秒后停止定位,默认:5sbuttonPosition:'RB', //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点});map.addControl(geolocation);geolocation.getCurrentPosition(function(status,result){});});</script>
</body>
</html>
到这里就可以显示了
高德地图基础教程超详细版相关推荐
- DM数据库——模式、表、索引管理基础(超详细版)
DM数据库--模式.表.索引管理基础(超详细版) 一.管理模式对象的空间 1.DM8对普通表和索引提供的参数 2.DM8对HUGE表提供的参数 3.空间限制 4.查看占用的空间 二.管理表 1.设计表 ...
- windows安装Weblogic教程(图文教程超详细版)
windows安装Weblogic教程(超详细) 一. 下载 WebLogic 到Oracle官网http://www.oracle.com/ 下载WebLogic(根据自己的情况选择),本文档下载的 ...
- Scala的基础语法(超详细版)
Scala的基础语法 文章目录 Scala的基础语法 1.声明值和变量 2.数据类型 3.算术和操作符重载 4.控制结构语句 4.1条件分支语句 4.2循环语句 5.方法与函数 5.1方法 5.2 函 ...
- git的安装与配置教程-超详细版
一.git的安装 1.下载git git官网地址:https://git-scm.com/download/win/ 选择所需要的版本,进行下载. 2.下载完成之后,双击下载好的exe文件进行安装. ...
- IntelliJ IDEA 12 创建Web项目 教程 超详细版
原文 http://www.cnblogs.com/cnjava/archive/2013/01/29/2881654.html IntelliJ IDEA 12 新版本发布 第一时间去官网看了下 ...
- 高德地图基础使用教程(附demo)
高德地图基础使用教程 简介 带大家一步步实现地图显示特定位置,或定位到当前位置.并且拖拽地图界面能够查询出指定位置周边的信息.通过关键字搜索周边信息. 本教程适合初学者. demo git 地址 一. ...
- Docker超详细版教程通俗易懂 -之- 入门篇
前言 学习Docker,你可以熟练的操作命令,能够把你的项目构建成Docker镜像! 是后端开发人员必备的技能!下面是自己的学习笔记,希望能帮助到需要的你! 特别感谢哔哩哔哩狂神:[狂神说Java]D ...
- Docker超详细版教程通俗易懂 -之- 进阶篇
此刻的你,已成功入门Docker.让我们一起继续深造(内容不难,很有意思) 容器数据卷 什么是容器数据卷 docker的理念回顾:将应用和环境打包成一个镜像! 数据?如果数据都在容器中,那么我们容器删 ...
- Docker02 狂神Docker视频学习笔记 :【狂神说Java 哔哩哔哩】Docker最新超详细版教程通俗易懂
目录 0. 视频源 0. 学习网址 基础篇 1. Docker概述 1.1 Docker为什么出现? 1.2 Docker历史 1.3 Docker能干什么 2. Docker安装 2.1 Docke ...
最新文章
- java 文件上传 jar_JavaWeb 之 使用 commons-fileupload.jar 实现文件上传
- Android文件系统的结构
- 有向图的邻接表表示法
- 使用nhmicro提供的micro-datasource嵌入式的解决微服务架构中分布式事务问题
- XCode8 App上传AppStore更新
- 十法则打造安全无线局域网
- 艾默生Ev3100变频器源码,汇编语言的。电梯变频器
- Win10 磁盘被写保护 请去掉写保护或使用另一张磁盘
- mysql 分区表合并_MySQL 合并表、分区表
- 硬件设计3---什么是电容?
- 移动网页布局基础:京东网页
- Node安装以及cnpm安装
- 短线炒股技巧 短线绝招全攻略
- sql定义表时,int(10)是什么意思?
- 数据库作业:SQL练习1 - CREATE / DROP / ALTER
- linux -- patch补丁文件以及相关内容
- 全球及中国数字身份解决方案行业研究及十四五规划分析报告
- 智能锁设计开发,解决方案
- 华为交换机的基本使用
- SAAS小额个人借贷系统的-安全
热门文章
- 优秀蓝牙耳机推荐,热销不错的四款蓝牙耳机推荐
- java 163邮箱发邮件_Java实现163邮箱发送邮件到QQ邮箱
- 服装企业在实践中探索
- dry的原理_4、干法蚀刻(dry etch)原理介绍
- webdav使用mysql_如何设置WebDAV与MySQL认证Apache2(Debian Etch)
- 神级:程序员面试、算法研究、编程艺术、红黑树、机器学习5大经典原创系列集锦与总结
- 计算机二级知识点——栈
- 不要过分相信基础函数, 因为那也是人写的------警惕负负得正的现有逻辑之坑
- 计算机课程教学调查问卷,《初中生信息技术课程学习现状调查问卷》分析报告...
- 跟着团子学SAP PS:项目模版搭建 CJ91/CJ92/CJ93/CN01/CN02/CN03/CN11/CN12/CN13