web端调用高德API

调用高德地图定位功能

废话不多说进入主题
↓↓↓↓↓↓↓↓↓↓↓↓↓
1、打开浏览器就如高德开放平台，登录账号、点击头像进入应用管理、点击创建应用、填写对应的名称和类型。
2、点击添加key会出现以下内容：
选定对应的信息，提交就会自动生成key
3、返回首页点击开发支持，然后在点击地图JS API

4、点击准备把script标签复制到对应的html文件里

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
//记得把申请的key替换

5、向下滑动进入定位页面，因为是浏览器定位，所以把对应的代码复制到JS里可以删除没用的代码：如下

AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,})geolocation.getCurrentPosition()AMap.event.addListener(geolocation, 'complete', onComplete)AMap.event.addListener(geolocation, 'error', onError)function onComplete (data) {// data是具体的定位信息console.log(data);//这里就是获取到的位置了}function onError (data) {// 定位出错}
})

注意：因为pc设备上大都缺少GPS芯片，所以在PC上的定位主要通过IP精准定位服务，该服务的失败率在5%左右。所以还需要在定位出错回调函数里处理一下。

function onError(data) {// 定位出错//注意this指向that.errLocation();
}

利用IP定位获取当前城市信息可以获取到一个大概的位置，把对应的代码复制到errLocation里

errLocation(){AMap.plugin('AMap.CitySearch', function () {var citySearch = new AMap.CitySearch()citySearch.getLocalCity(function (status, result) {if (status === 'complete' && result.info === 'OK') {// 查询成功，result即为当前所在城市信息，这里可以打印看一下console.log(result);}})})
}

然后进入地理编码与逆地理编码页面，把正向地理编码方法的代码复制到成功获取信息的函数里，如下：

errLocation() {let that = this;AMap.plugin("AMap.CitySearch", function() {var citySearch = new AMap.CitySearch();citySearch.getLocalCity(function(status, result) {if (status === "complete" && result.info === "OK") {// 查询成功，result即为当前所在城市信息console.log(result);AMap.plugin("AMap.Geocoder", function() {var geocoder = new AMap.Geocoder({// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode//注意这里记得修改city: result.adcode});//还有这里var lnglat = result.rectangle.split(";")[0].split(",");//这里geocoder.getAddress(lnglat, function(status, data) {//这里if (status === "complete" && data.info === "OK") {// result为对应的地理位置详细信息that.location = data.regeocode.formattedAddress}});});}});});}

这样就可以了。
看一下成果（刚好我就是那百分之5的概率，定位出错了，所以真实位置bu准确）：

以上！！！！！！！

web端调用高德API相关推荐

Web端调用高德地图-自定义地图-只显示中国区域
1. 通过以下链接注册账号密码高德开放平台 | 高德地图API高德开放平台官网https://lbs.amap.com/?ref=https%3A%2F%2Fgeohub.amap.com%2Fmap ...
python调用高德api路径规划_Python调用高德API实现批量地址转经纬度并写入表格的功能...
本段代码是先将需要转换经纬度的地址爬取在 '地址.csv' 文件里,文件截图示例: 代码展示 # coding=utf-8 # SPL # 时间:2020/12/20 21:15 import csv ...
Web端调用Outlook 的发信窗口
前端发信有个其他部门的同时问我,想在web 端调用Outlook 窗口进行发信. 稍微调研了一下,得出如下结论在前端直接调用Outlook 发信: 使用html 标签的方式调用outlook, b ...
记录一下web端调用IC卡读卡器的大致流程
总结一下web端IC卡读卡器的调用方法公司项目中用到了IC卡,需要实现读写IC卡,并且与服务端交互.IC卡读卡器用的是德卡的D8型号,SDK可以在德卡官网找到,下载链接:德卡SDK下载. 官方提供了 ...
python调取高德api_Python调用高德API实现批量地址转经纬度并写入表格的功能
本段代码是先将需要转换经纬度的地址爬取在 '地址.csv' 文件里,文件截图示例: 代码展示 # coding=utf-8 # SPL # 时间:2020/12/20 21:15 import csv ...
Python爬取链家网获取二手房数据并调用高德api获得经纬度
链家网获得数据地址,高德api获得经纬度(同理链家网也可以换成其他58同城,赶集网的数据,因为反爬虫比较厉害,没时间整,就用链家网的数据先试试水) 首先爬链家网,Info包含一条信息 import j ...
php调用打印机,web端调用打印机方案总结(示例代码)
背景新零售业务开始以来,一些线下商品上架售卖的同时,要明确售卖价格,前期人工人肉写标签贴上商品售卖价,容易产生疏忽,导致所标售卖价与收银所收价格不统一,造成顾客疑惑(据说还因为被投诉,上了新闻-_ ...
web端引入高德地图
一.用原始方法引入,对所有web端都可用先引入一下文件 <link rel="stylesheet" href="https://a.amap.com/jsapi ...
获取中国省、市、区数据（调用高德API）
一.数据来源:高德开发API(后端调用接口实现数据落库) 行政区域查询-API文档-开发指南-Web服务 API | 高德地图API 二.需要用到的依赖(只附上主要依赖) 其他依赖:MybatisPl ...
Web端调用本地打印机－Java实现
实现思路: 用Java调用本地打印机实现功能,将java程序打包成exe可执行文件,在本地注册表中新增URL协议,最后web端通过该协议实现启动本地exe程序进行打印实现过程: 1.下载32位TSC ...

web端调用高德API

调用高德地图定位功能

web端调用高德API相关推荐

最新文章

热门文章