高德地图简单使用--定位，地址经纬度互相解析，移动标点

最新推荐文章于 2024-06-28 11:29:07 发布
最新推荐文章于 2024-06-28 11:29:07 发布
阅读量1.4k 收藏
点赞数
文章标签： 高德地图教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hgh_1997/article/details/102636034
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高德地图</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

    <style>
        html,
        body,
        #container {
            height: 500px;
            width: 500px;
        }

        .amap-marker:first-child .amap-icon img {
            width: 25px;
            height: 34px;
        }

        .btn {
            width: 10rem;
            margin-left: 6.8rem;
        }
    </style>

</head>

<body onload="init()">

    <div id="container"></div>

    <div class="input-card" style='width:28rem;'>

        <label style='color:grey'>地理编码，根据地址获取经纬度坐标</label>

        <div class="input-item">

            <div class="input-item-prepend"><span class="input-item-text">地址</span></div>

            <input id='address' type="text" value='北京市朝阳区阜荣街10号'>

        </div>

        <div class="input-item">

            <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>

            <input id='lnglat' disabled type="text">

        </div>

        <input id="geo" type="button" class="btn" value="地址 -> 经纬度" />

    </div>

    <div class="info">鼠标拖拽点标记试试</div>


</body>

</html>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的秘钥&plugin=AMap.Geocoder"></script>

<script type="text/javascript">

    var marker = null

    var map = null

    var geocoder = null

    /*
 
    * newlocation 经纬度
 
    **/

    function init(newlocation = [116.397428, 39.90923]) {

        map = new AMap.Map("container", {

            resizeEnable: true,

            center: newlocation,

            zoom: 16

        });

        geocoder = new AMap.Geocoder({

            city: "全国",

        });

        marker = new AMap.Marker({

            position: map.getCenter(),

            // icon: 'https://a.amap.com/jsapi_demos/static/resource/img/user.png',

            offset: new AMap.Pixel(-13, -30),

            // 设置是否可以拖拽

            draggable: true,

            cursor: 'move'

        });

        marker.setMap(map);

        var clickHandler = function (e) { // 点图点击

            // console.log(e.lnglat)

            marker.setPosition(e.lnglat);

            againAddress(e.lnglat)

        };

        map.on('click', clickHandler);

    }

    function geoCode() {

        var address = document.getElementById('address').value;

        geocoder.getLocation(address, function (status, result) {

            console.log(status, result, result.geocodes[0].location, 'status, result')

            if (status === 'complete' && result.geocodes.length) {

                againLocation(result.geocodes[0].location)

                log.success('根据地址');

            } else {

                log.error('根据地址查询位置失败');

            }

        });

    }

    document.getElementById("geo").onclick = geoCode;

    document.getElementById('address').onkeydown = function (e) {

        if (e.keyCode === 13) {

            geoCode();

            return false;

        }

        return true;

    };

    // 根据地址获取经纬度更新地图最新标点

    function againLocation(newlocation) {

        marker.setMap(null); // 先移除点再添加新点

        marker = null;

        setTimeout(() => {

            init(newlocation)

        }, 300);

    }

    // 根据经纬度获取详情地址

    function againAddress(newlocation) {

        geocoder.getAddress(newlocation, function (status, result) {

            if (status === 'complete' && result.regeocode) {

                console.log(status, result)

                document.getElementById('address').value = result.regeocode.formattedAddress

                log.success('根据经纬度查询地址成功啦啦啦啦')

            } else {

                log.error('根据经纬度查询地址失败')

            }

        });

    }

    function ceshi() { // 根据地址获取金纬度

        console.log(marker)

    }

</script>

 

迷失在广东的靓仔中了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
全国省城市县城经纬度(腾讯地图版)
03-22
文件中使用的都是腾讯地图的坐标。全国各个省份的经度纬度，包含香水，澳门和台湾；全国400多个城市，8000多个区县。文本是js格式，已经用define开发成模块，直接引入就可以使用。格式举例：{ id:"110000", name:"北京", fullname:"北京市", pinyin:["bei","jing"], location:{ lat:39.90469, lng:116.40717 }
使用高德地图获得经纬度坐标
三口酥屋
12-30 4189
一. 创建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 三. 创建自定义函.
使用python基于经纬度获取高德地图定位地址【逆地址解析】
最新发布
weixin_41652574的博客
06-28 610
逆地址解析...
高德地图获取经纬度坐标
ycs_0405的专栏
03-20 2万+
高德地图获取经纬度坐： https://lbs.amap.com/console/show/picker
高德地图点击获取经纬度并标记
容我半世癫狂的博客
11-15 5752
官网api： https://lbs.amap.com/api/javascript-api/summary 引入js： &lt;script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&amp;key=cb93bced6b9e12ef3b2345be57ae1t24&amp;plugin=AMap.G...
【高德地图api】输入地点名称定位坐标，并放大地图级别
qq_40610760的博客
04-08 4307
效果： 代码： <div class="street-map-search-warp layui-hide"> <div style="width: 100%;height: 38px;"> <input class="layui-input street-map-search-input" id="street-map-search-input" placeholder="输入名称，快速定位地图中心坐标" >
多功能高德地图-多功能路径-电子围栏-定位打卡
12-09
基于vue开发，组件element-ui，功能api高德地图。 本程序包含 多功能路径、电子围栏、定位打卡 功能 结合之前文章将程序源码整理在一起。 代码都已安排注释，下载后先安装node_modules依赖， main.js中配置好密钥 ...
vue 使用高德地图vue-amap组件过程解析
12-10
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap 然后在 main.js ...
高德地图集成定位和根据地址搜索经纬度进行定位功能
04-16
本文将详细介绍如何在项目中集成高德地图的定位服务，并实现根据地址搜索经纬度进行定位。 首先，我们需要了解高德地图SDK的集成步骤。在Android或iOS项目中，开发者需要先在高德地图官网注册并获取API密钥（AK），...
Python 利用高德地图api实现经纬度与地址的批量转换
01-01
我们都知道，可以使用高德地图api实现经纬度与地址的转换。那么，当我们有很多个地址与经纬度，需要批量转换的时候，应该怎么办呢？ 在这里，选用高德Web服务的API，其中的地址/逆地址编码，可以实现经纬度与地址的...
高德地图多个经纬度定位和标记
06-03
这个代码可以实现多个经纬度坐标点的定位和在高德地图上的显示
高德地图，根据经纬度定位到某个地方（位置标注）
m0_37346206的博客
01-29 6555
位置标注api： https://m.amap.com/navi/?dest=104.062273,30.592899&destName=成都学院&key=您的key 参数说明： dest 经纬，纬度。此处跟百度地图相反，请注意。 destName 位置标注的描述词。比如：成都学院 key 您的key。前往控制台下的“应用管理”查看。 接口文档的位置，以及其他参数： 位置标注-开发指南-地图组件 | 高德地图API 最后的效果：
高德地图地址解析经纬度以及经纬度解析地址
随心的博客
06-22 2462
高德地图地址解析经纬度以及经纬度解析地址 简述：通过地址解析出经纬度，以及根据经纬度解析出地址。 官方文档：https://lbs.amap.com/api/webservice/guide/api/georegeo 具体实现步骤： 1、 申请Web服务API类型Key ； 申请完key之后在yml配置文件中配置key map: key: 申请的key 2、注入key以及url服务地址： @Component @Data public class MapClientProperties {
uniapp使用高德地图地理位置逆解析/将获取到的经纬度转化为地址
F2691898750的博客
02-12 4138
uniapp使用高德地图地理位置逆解析/将获取到的经纬度转化为地址。首先使用uni.chooseLocation获取一个地图上指定的经纬度，然后通过高德地图逆解析的api进行逆解析来获得详细地址。1、在高德登录注册，进行个人或企业开发者认证（个人开发者可以随时升级企业开发者）使用时直接传参即可打印成功或失败数据；key：高德地图里面获取的key；获取的结果即为解析出来的地址。说明：这是一个函数，有三个参数；2、进入控制台，按以下图示操作
基于高德离线地图数据实现GPS经纬度逆解析城市信息
Chuyans的博客
06-12 3593
一、获取离线数据： 如果你只是想实现逆解析功能，那该步骤可以跳过，因为地图数据已经收集打包好了。直接文末找git路径就好了。 准备工作：python numpy h5py openpyxl cython 申请高德key，参考：https://blog.csdn.net/qq_32444825/article/details/79441900 key 填入 getRegions.py amap_key变量中 ...
用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址
user-jianyong的博客
06-30 3158
用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址 <template> <div class="wrap"> <div> <div>详细地址:{{ addressKeyWord }}</div> <div>经纬度:{{ lnglat }}</div> <div>备注地点名:{{ locationName }}&
中国城市经纬度表(精确到县区)Google地图用
热门推荐
Criss@陈磊
09-21 7万+
2015-5-16 补充说明：  1.完整示例讲解：http://blog.csdn.net/a497785609/article/details/45287619 (包含建表语句，js文件) 2.Demo下载：http://download.csdn.net/detail/a497785609/8633615 [xhtml] view plain cop
高德地图通过经纬度定位并打上标记
csdnchen666666的博客
09-14 2万+
由于现在的项目有个部分需要给出经纬度然后在地图显示对应的坐标，并打上标记，现在项目比较赶，没有太多时间去研究这个，所以先记录下 //这里的key需要换成自己的     function init(){         var map = new AMap.Map('container', {             center: [114.31, 30.5
高德地图--根据地理位置获取经纬度
博客
11-16 4271
即地理/逆地理编码，直接查看高德api即可 https://lbs.amap.com/api/webservice/guide/api/georegeo/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值