js实现地图选点获取经纬度

简介: js实现地图选点获取经纬度

1引入链接

引入key值以及高德地图链接

https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css
https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js

https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Geocoder

2.地图初始化

代码如下(示例):

 var map = new AMap.Map("container", {
        resizeEnable: true
    });
 var geocoder = new AMap.Geocoder({
        city: "02", //设置城市
        radius: 1000 //范围
    });
    var marker = new AMap.Marker();

3.js代码

代码如下(示例):

  function regeoCode() {
        var lnglat  = document.getElementById('lnglat').value.split(',');
        map.add(marker);
        marker.setPosition(lnglat); 
        geocoder.getAddress(lnglat, function(status, result) {
            if (status === 'complete'&&result.regeocode) {
                var address = result.regeocode.formattedAddress;
                document.getElementById('address').value = address;
            }else{
                log.error('查询失败')
            }
        });
    }
相关文章
|
24天前
|
编解码 数据可视化 前端开发
如何使用 D3.js 创建一个交互式的地图可视化?
如何使用 D3.js 创建一个交互式的地图可视化?
|
3月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
59 0
|
5月前
|
JavaScript 定位技术 API
Js地图路线规划以及点击获取经纬度
Js地图路线规划以及点击获取经纬度
|
5月前
|
存储 JavaScript 定位技术
|
6月前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
237 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
JavaScript 前端开发 定位技术
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
96 0
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
|
12月前
|
JavaScript API
js日期、经纬度格式化
js日期、经纬度格式化
85 0
|
JSON JavaScript 前端开发
javascript实现经纬度与地址的互转
原文:javascript实现经纬度与地址的互转   最近项目中会用到将地址转换为经纬的。从出来,还一直未遇到过这类问题,下来自己提前学习了,将自己所学的记录在案。   在网上找了很多资料,最后确定了,百度的API,有实现相关的接口(API地址)。
1139 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
84 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
105 4