高德地图坐标查询工具——JavaScript

最新推荐文章于 2024-04-29 09:28:45 发布
最新推荐文章于 2024-04-29 09:28:45 发布
阅读量5k 收藏 2
点赞数
分类专栏： 地图
原文出处： http://www.2cto.com/kf/201311/260807.html
最近需要查询高德地图上某个地点的坐标，但是苦于高德地图没有提供这样的功能。幸运的是，高德地图提供了javascript的api，于是打算自己写一个查询坐标的工具，在这里分享给大家。
 
代码如下：
 
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html> 
   
< html > 
< head > 
     < title >高德地图</ title > 
     < meta charset = "UTF-8" /> 
     < script src = "http://webapi.amap.com/maps?v=1.2&key=662b7a5d373bccb29453167d08245aef" type = "text/javascript" ></ script > 
     < script > 
         var mapObj; 
         function getCoordinate(location){ 
             var geocoderOption = { 
                 range:300,//范围 
                 crossnum:2,//道路交叉口数 
                 roadnum:3,//路线记录数 
                 poinum:2//POI点数 
             }; 
             var geocoder = new AMap.Geocoder(geocoderOption); 
             geocoder.geocode(location, function(data){ 
                 var x = (data.list)[0].x; 
                 var y = (data.list)[0].y; 
                 document.getElementById("result").innerHTML = x + "," + y; 
   
                 var position=new AMap.LngLat(x,y);//创建中心点坐标 
                 if (!mapObj) { 
                     mapObj=new AMap.Map("container",{center:position, level:18});//创建地图实例 
                 }else { 
                     mapObj.setZoomAndCenter(18,position); 
                 } 
             }); 
         } 
     </ script > 
     < style type = "text/css" > 
         html{height:100%} 
         body{height:100%;margin:0px;padding:0px} 
         #container{height:100%} 
     </ style > 
</ head > 
< body > 
     < div > 
         < input type = "text" id = "input1" > 
         < button type = "button" onclick = "getCoordinate(document.getElementById('input1').value)" >查询坐标</ button > 
     </ div > 
     < div id = "result" ></ div > 
     < div id = "container" ></ div > 
</ body > 
</ html >

 

 
 
使用时直接将以上代码拷贝到一个文本文件中，保存为html格式，用浏览器打开，就可以直接使用了。
界面如下：

chelen_jak
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用高德地图获得经纬度坐标
三口酥屋
12-30 4162
一. 创建config配置 gaode.php return [ 'geocode' => 'https://restapi.amap.com/v3/geocode/geo?key=你的key&address=%s&city=%s' ]; 二. 安装Guzzle-http插件 Guzzle-http:Guzzle, PHP HTTP 客户端 — Guzzle中文文档 composer require guzzlehttp/guzzle 三. 创建自定义函.
使用高德地图api在页面中展示地图
denglunde的博客
09-23 1229
写页面的时候需要用到地图或者其他好看的图表，很多api使用都有官方文档可以查看，用起来很方便。 高德地图api的使用主要有以下几点： 1.引入JS API 的入口脚本标签并将key值换成自己的 2.创建地图容器 容纳地图（可以设置宽高） 3.创建地图实例对象（同时可以给地图设置中心点、级别、显示模式、自定义样式等属性） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
Vue 高德地图 输入提示和POI搜索插件结合使用 拾取对应地点坐标
weixin_55510188的博客
08-26 4512
7、效果：在搜索框输入地点名称，产生输入提示，点击某个提示选项后，进行POI搜索，地图会自行标记出搜索地点。点击地图任意位置，或者POI搜索结果的marker，都会拿到相对应的坐标。4、JSAPI 的加载：这里使用官方文档推荐的方式，使用 JSAPI Loader ，并按 NPM 方式使用 Loader。1、准备好高德地图的key和安全密钥jscode，key的平台类型是Web 端 ( JSAPI )。如上述代码，在配置文件中设置安全密钥，这样只要外部引用key就会执行 设置安全密钥 的代码。...
前端开发地图拾取坐标系统（高德、百度、谷歌、腾讯）
最新发布
chenchuang0128的博客
04-29 1609
谷歌地图——自带坐标获取 网址：https://www.google.com/maps/ 操作：右键需要获取坐标的点，点击右键菜单中的【这儿有什么？百度地图——拾取坐标系统 网址：http://api.map.baidu.com/lbsapi/getpoint/index.html。高德地图——高德开放平台 网址：https://lbs.amap.com/console/show/picker。腾讯地图——坐标拾取器 网址：https://lbs.qq.com/tool/getpoint/
通过百度地图API和高德地图API进行反坐标逆向地理位置
heweiyabeijing的专栏
04-28 2579
该代码的主要逻辑就是构造请求,获取响应,解析JSON响应,并从中提取地址信息。如果出现异常,则无法获取地址信息,会返回null。该代码的主要逻辑与使用百度地图API的代码示例非常相似,也是构造请求,获取响应,解析JSON,并提取地址信息。这段代码的主要功能是使用百度地图API进行反Geo编码,将经纬度坐标转换为地址信息。这段代码的主要功能是使用高德地图API进行反Geo编码,将经纬度坐标转换为地址信息。2. 构造请求URL,URL包含ak参数(apikey)及location参数(经纬度坐标)。
高德根据经纬度，查询所在位置信息
helpluozhao123的博客
04-03 5566
Tag(name=“AddressComponent”, description=“根据经纬度获取信息”)@Schema(title = “国籍”)@Schema(title = “省份”)@Schema(title = “街道”)@Schema(title = “市”)@Schema(title = “区”)
高德地图api锁定地区查询特效代码
03-20
高德地图API是提供给开发者的一款强大工具，它允许我们集成地图功能到网页中，包括定位、路线规划、区域查询等。本篇文章将深入解析“高德地图API锁定地区查询特效代码”，帮助你理解和实现多边形绘制覆盖物的高级...
ArcGIS api for javascript 3.21版本加载高德地图
08-21
在本文中，我们将深入探讨如何使用ArcGIS API for JavaScript 3.21版本来加载高德地图。ArcGIS API是一款强大的工具，它允许开发者在Web应用程序中集成地理信息系统（GIS）功能，包括地图显示、图层操作、地理编码、...
高德地图轨迹平滑移动改进demo
11-24
1. **高德地图API**：首先，我们需要了解高德地图提供的JavaScript API或Android/iOS SDK，这些工具允许开发者在网页或原生应用中集成地图功能，包括定位、标注、路线规划以及轨迹绘制等。 2. **轨迹数据处理**：在...
Etong.rar_java 地图_公交查询java_地图 java_成都
09-23
2. **地图API**：项目中涉及的地图功能可能采用了第三方地图API，如高德地图API、百度地图API或谷歌地图API等。这些API提供了地理坐标转换、路线规划、地图展示等功能，开发者可以通过调用它们来构建地图应用。 3. ...
JS高德地图模拟驾车路线规划绘制代码.zip
09-27
在这个项目中，`<script>`标签用于加载高德地图API库以及自定义的JavaScript脚本，使得网页能够与地图服务进行交互。 高德地图API是高德地图提供的一套用于开发地图应用的接口，它允许开发者在网页上显示地图、标注...
java高德根据坐标获取真实位置工具
09-29
java工具类，传入高德坐标XY，方法返回详细地理位置说明，包过省，市，区县及街道名称，和相关代号与代码
高德地图通过经纬度获取位置信息
yushun的博客
04-07 6049
高德地图通过经纬度获取位置信息
国内地图坐标系介绍及常见地图（百度、高德、凯立德）之间的坐标系转换
寄情于码
02-08 1万+
一、国内地图坐标系简介 1、  WGS84（地图坐标） 美国GPS使用的是WGS84的坐标系统。GPS系统获得的坐标系统，基本为标准的国际通用的WGS84坐标系统 2、  GCJ-02（火星坐标） GCJ-02是由中国国家测绘局制订的地理信息系统的坐标系统。它是一种对经纬度数据的加密算法，即加入随机的偏差。国内出版的各种地图系统（包括电子形式），出于国家安全考虑，必须至少采用GCJ
高德地图api（获取用户当前位置）
weixin_42737937的博客
10-23 8923
&lt;script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&amp;key=key值"&gt;&lt;/script&gt; var map, geolocation; //加载地图，调用浏览器定位服务 map = new AMap.Map('container', { resizeEnable:...
高德地图 根据名称搜索坐标，坐标点呈现列表展示
韩旭的博客
08-13 2841
效果展示 话不多说，直接上代码 <!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"
（一）ArcGIS Server之发布动态地图服务
热门推荐
王培晓Carpenter
08-14 3万+
引言 什么是地图服务 地图服务之动态地图服务 利用ArcMap发布动态地图服务 1用ArcMap打开我们想要发布为服务的数据 2为了发布出来的数据好看一点我们可以适量的将我们的地图数据进行符号化可选此处省略 3利用ArcMap连接ArcGIS Server发布服务 查看地图服务 1通过服务管理器查看服务 2通过Services Directory 查看服务详细信息1.引言 在WebGIS开
高德地图POI搜索提示查询，获取marker点坐标
Mrxianseng的博客
04-18 3588
人狠话不多，直接上代码 直接POI提示搜索后查询，结果查询后地图上标记的点无法获取坐标 改进之后： 将POI搜索查询后的点设置为地图中心，然后点击获取标记点坐标 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compati...
uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址
本以为成功很简单，没想到活成普通人都需拼尽全力！
03-14 5583
开发过小程序的都了解，我们在调用 uni.getLocation Api的时候，在微信小程序端，只会返给我们一个坐标系，当前位置的经纬度，当我们需要去知道当前位置的详细地址时，我们就需要进行反解析来获取地址，因为公司采用的是高德，我就以高德为例了，（腾讯，百度都一样） 1. 创建应用，设置key 2.下载微信小程序SDK，地址：概述-微信小程序插件 | 高德地图API 3.下载完成之后，放到我们的uniapp项目里面，此时我们可以封装一个方法，用来获取坐标解析后的详细地址 impo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值