-
2021-06-09 04:33:18酸奶小妹的火星坐标
#iMap {
height: 1200px;
width: 1000px;
float: left;
}
.info {
float: left;
margin: 0 0 0 10px;
}
label {
width: 80px;
float: left;
}
.detail {
padding: 10px;
border: 1px solid #aaccaa;
}
坐标拾取工具(GCJ-02坐标)
说明:
1、鼠标滚轮可以缩放地图,拖动地图。
2、点击地图,即可获得GCJ-02的经纬度坐标,即火星坐标。
var mapObj;
var lnglatXY;
//初始化地图
function mapInit() {
var opt = {
level: 10, //设置地图缩放级别
center: new AMap.LngLat(114.064675,22.548782) //设置地图中心点
}
mapObj = new AMap.Map("iMap", opt);
AMap.event.addListener(mapObj, ‘click’, getLnglat); //点击事件
}
function geocoder() {
var MGeocoder;
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function () {
MGeocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
//逆地理编码
MGeocoder.getAddress(lnglatXY);
});
//加点
var marker = new AMap.Marker({
map: mapObj,
icon: new AMap.Icon({
image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png" ,
size: new AMap.Size(58, 30),
imageOffset: new AMap.Pixel(-0, -0)
}),
position: lnglatXY,
offset: new AMap.Pixel(-5, -30)
});
// mapObj.setFitView();
}
//回调函数
function geocoder_CallBack(data) {
console.log("ddd");
var address;
//返回地址描述
address = data.regeocode.formattedAddress;
console.log(address);
//返回结果拼接输出
document.getElementById("iAddress").innerHTML = address;
}
//鼠标点击,获取经纬度坐标
function getLnglat(e) {
mapObj.clearMap();
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
document.getElementById("lnglat").innerHTML = x + "," + y;
lnglatXY = new AMap.LngLat(x, y);
geocoder();
}
点赞 (0)赏分享 (0)
更多相关内容 -
高德地图坐标拾取、带参进入定位坐标
2020-10-12 10:48:42高德地图坐标拾取、带参进入定位坐标、自动复制坐标、可在URL跟坐标参数进行定位,可跟?gps=坐标系,坐标系,可定位多个坐标,可自动获取坐标,扒的高德地图坐标系,添加了带参进入定位功能 -
百度地图坐标转高德地图坐标源码
2018-10-15 14:50:06因为高德百度地图各自有国标转换而来标准体系不一样,百度地图坐标转换成高德地图坐标。 -
Android中GPS坐标转换为高德地图坐标详解
2020-08-31 18:23:58最近因为公司需求,在做GPS定位,并且将获得的坐标显示在高德地图上,但是实际效果跟我们期望的是有偏差的。...下面这篇文章就详细介绍了Android中GPS坐标转换为高德地图坐标的方法,需要的朋友可以参考下。 -
高德地图坐标拾取器
2017-07-14 17:32:46高德地图的坐标拾取系统 -
vue 使用高德地图 获取坐标
2022-04-08 15:18:20vue 使用高德地图 获取坐标前端代码,弹框形式展现:
<el-dialog :visible.sync="dialogFormVisible"> <div id="container" style="width: 100%;height: 500px;" tabindex="0" > </div> <div id="btns"> <el-input id="lng" style="width: 20%" placeholder="选中的经度"></el-input> <el-input id="lat" style="width: 20%" placeholder="选中的纬度"></el-input> <el-button type="primary" @click="lngLat">确定</el-button> </div> </el-dialog>
vue-js代码:
new Vue({ el: '#app', data: function() { return { ruleForm: { lng: '', lat: '' }, dialogFormVisible: false, districtList:[], rules: { }, methods:{ init(){ var map = new AMap.Map('container', { resizeEnable: true, zoom: 15 }); AMap.plugin('AMap.ToolBar', function() { var toolbar = new AMap.ToolBar(); map.addControl(toolbar) }); var marker = new AMap.Marker({ position: map.getCenter(), //标记的位置坐标 offset: new AMap.Pixel(-5, -5), //标记相对位置的偏移,对应style的left和top icon: ico, //创建好的icon,也可以在后面使用setIcon()方法添加 zoom: 13 }); marker.setLabel({ offset: new AMap.Pixel(10, 30) }); var ico = new AMap.Icon({ size: new AMap.Size(20, 30), // 图标尺寸 image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png', // Icon的图像 imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等 imageSize: new AMap.Size(20, 30) // 根据所设置的大小拉伸或压缩图片,对应style的width和height }); map.add(marker); //将创建好的marker放到地图上面 AMap.event.addListener(map, 'click', function (e) {//点击事件 map.clearMap(); var x = e.lnglat.getLng(); var y = e.lnglat.getLat(); marker = new AMap.Marker({ position:[x,y], //标记的位置坐标 offset: new AMap.Pixel(-5, -5), //标记相对位置的偏移,对应style的left和top icon: ico, //创建好的icon,也可以在后面使用setIcon()方法添加 zoom: 13 }); map.add(marker); document.getElementById("lng").value = x; document.getElementById("lat").value =y; }); }, diTu(){ this.dialogFormVisible = true; setTimeout(() => {//这里注意需要添加延迟,不然地图不加载,只有一个空白的底色 this.init() },2000); }, lngLat(){ this.ruleForm.lng = document.getElementById("lng").value; this.ruleForm.lat = document.getElementById("lat").value; this.dialogFormVisible = false; } } })
-
57.(leaflet篇)leaflet高德坐标转天地图坐标(gcj02转大地2000).zip
2021-12-10 09:04:59下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/121848484 -
vue使用高德地图获取地理坐标信息
2021-06-11 17:17:55vue使用高德地图获取地理坐标信息 -
高德地图坐标系全国县区以上行政代码及经维度.xlsx
2019-10-30 18:18:30高德地图坐标系县级以上行政代码及经纬度 -
vue使用高德地图根据坐标定位点的实现代码
2020-10-16 12:59:36主要介绍了vue使用高德地图根据坐标定位点的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 -
高德地图 js 搜索获取坐标转换地图添加标记
2018-09-30 17:33:35高德地图搜索获取坐标转换地图添加标记 记得换成自己申请的KEY值。 -
高德坐标拾取器.rar
2020-05-27 11:54:29高德坐标拾取器,里面有几个本来是想找个现在的自己用但是发现都不是我想要的,里面的修改版amap.html是我在原来文件基础上修改的. -
高德地图路径规划api,批量获取坐标点间的距离,驾车时间等
2022-04-11 16:33:03高德地图路径规划api,批量获取坐标点间的距离,驾车时间等 -
获取百度地图、高德地图经纬度坐标
2022-07-01 14:02:48获取经纬度插件参考:如何使用Free Map 插件在百度地图 高德地图 获取坐标点 围栏 路线 地理围栏 - 掘金
记录一下使用Free Map 插件获取地图的坐标的使用。
一、下载了安装Free Map 插件。有条件的同学可以直接在谷歌插件商场搜索并安装(https://chrome.google.com/webstore/search/Free Map);或者使用我已经下载好的插件(百度、高德坐标提取插件-Javascript文档类资源-CSDN下载)
二、在浏览器中打开插件
三、打开百度地图(这里以百度地图为例,高德地图同理)
·获取某个地点经纬度范围边框
地点:天安门
上方红框中是Free Map 插件的内容,中间红框中是搜索出来的内容;
点击“复制bd”按钮,可将天安门范围坐标复制出来。保存为json格式文件,也可以通过插件导入。
导出效果:
导入效果:
·获取A地到B地的路线
关键词:天安门东、天坛东门
获取bd:
导入bd效果:
总结:这个插件可以获取到想要的地点经纬度坐标,在实际应用中可以先通过插件来获取自己地区列表的经纬度,在自己项目中将经纬度放进去。进一步可以通过前端脚本利用这个插件开爬取自己想要的地区经纬度。
-
高德地图坐标拾取器1.rar
2021-02-04 14:31:38高德地图坐标拾取器1 -
利用java、js或mysql计算高德地图中两坐标之间的距离
2020-10-19 02:38:32最近因为工作的需求,需要计算出高德地图中两个坐标的距离,通过查找相关资料发现了多种实现的方法,下面这篇文章主要给大家介绍了关于利用java、js或mysql计算高德地图中两坐标之间距离的相关资料,文中通过示例... -
java版GPS坐标转换为高德地图坐标
2015-12-25 14:03:24此文件为纯java编写的GPS坐标转换到高德地图坐标,直接将文件添加到工程目录,调用转换函数即可,输入是double类型,输出是double数组,注意:输入输出数据的单位都是度。 -
高德地图实现多边形框选选中地图中坐标点.html
2020-03-15 21:52:30高德地图实现多边形框选,选中展示地图中坐标点。实现坐标点框选。范围内坐标点选择。包括矩形,圆形,和任意多边形。。。需要修改key为自己注册的开发key -
高德地图获取经纬度、高德地图坐标转为百度地图坐标
2018-01-20 10:29:42通过异步网络请求,调用高德API,...高德地图API,点击这里 package com.alibaba.controller; import com.alibaba.entity.MyPoint; import com.fasterxml.jackson.databind.JsonNode; import com.fasterxml.jackson.通过异步网络请求,调用高德API,获取某个地址的经纬度等信息,再转为百度的经纬度。高德地图API,点击这里
package com.alibaba.controller; import com.alibaba.entity.MyPoint; import com.fasterxml.jackson.databind.JsonNode; import com.fasterxml.jackson.databind.ObjectMapper; import com.ning.http.client.AsyncHttpClient; import com.ning.http.client.AsyncHttpClientConfig; import com.ning.http.client.ListenableFuture; import com.ning.http.client.Response; import org.slf4j.LoggerFactory; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import java.math.BigDecimal; import java.util.concurrent.TimeUnit; /** * Created by lightClouds917 * Date 2018/1/17 * Description:异步网络请求 * 此处以请求高德地图示例 */ @RestController @RequestMapping("asynClient") public class AsynClientController { private final org.slf4j.Logger logger = LoggerFactory.getLogger(getClass()); /** π */ private static double PI = 3.1415926535897932384626; /** 参数 */ private static double X_PI = 3.14159265358979324 * 3000.0 / 180.0; /** * 高德地图 获取经纬度 * @return */ @RequestMapping(value = "test6",method = RequestMethod.GET) public String test6() { logger.info("==================>查询高德地图"); String url = "http://restapi.amap.com/v3/geocode/geo?address=方恒国际中心A座&key=05831d6b4be84db6d042b1d00d65b006"; String url1 = "http://restapi.amap.com/v3/geocode/geo?address=北京市朝阳区阜通东大街6号&output=XML&key=05831d6b4be84db6d042b1d00d65b006"; String url2 = "http://restapi.amap.com/v3/geocode/geo?address=杭州市江干区杭海路1099号&key=05831d6b4be84db6d042b1d00d65b006"; //异步网络请求 AsyncHttpClientConfig.Builder builder = new AsyncHttpClientConfig.Builder(); builder.setCompressionEnabled(true).setAllowPoolingConnection(true); builder.setRequestTimeoutInMs((int) TimeUnit.MINUTES.toMillis(1)); builder.setIdleConnectionTimeoutInMs((int) TimeUnit.MINUTES.toMillis(1)); AsyncHttpClient client = new AsyncHttpClient(builder.build()); try { ListenableFuture<Response> future = client.prepareGet(url2).execute(); String result = future.get().getResponseBody(); logger.info("======>result:"+result); JsonNode jsonNode = new com.fasterxml.jackson.databind.ObjectMapper().readTree(future.get().getResponseBody()); if (jsonNode.findValue("status").textValue().equals("1")) { JsonNode listSource = jsonNode.findValue("location"); for (String location : listSource.textValue().split(",")) { //得到这个位置的经纬度 logger.info(location); } } } catch (Exception e) { e.printStackTrace(); } finally { if (client != null) { client.close(); } } return null; } /** * 查询高德地图坐标 * 转为百度地图 * url中:address为查询地址 * key需要去高德地图申请,类似于秘钥一样 ,申请地址:http://lbs.amap.com/api/webservice/summary/ */ @RequestMapping(value = "test7",method = RequestMethod.GET) public void test7(){ try { logger.info("==================>查询高德地图"); String url = "http://restapi.amap.com/v3/geocode/geo?address=方恒国际中心A座&key=05831d6b4be84db6d042b1d00d65b006"; //异步网络请求 比上面的简化了一下 AsyncHttpClient client = new AsyncHttpClient(); AsyncHttpClient.BoundRequestBuilder builder = client.prepareGet(url); ListenableFuture<Response> future = builder.execute(); JsonNode jsonNode = new ObjectMapper().readTree(future.get().getResponseBody()); if(jsonNode.findValue("status").textValue().equals("1")){ JsonNode location = jsonNode.findValue("location");; logger.info("==========>location:"+location); String[] lonAndLat = location.textValue().split(","); logger.info("========>经度:"+lonAndLat[0]); logger.info("========>纬度:"+lonAndLat[1]); //高德---->百度地图 MyPoint myPoint = bd_encrypt(new MyPoint(Double.valueOf(lonAndLat[0]), Double.valueOf(lonAndLat[1]))); logger.info("========>经度:"+myPoint.getLon()); logger.info("========>纬度:"+myPoint.getLat()); } String responseBody = future.get().getResponseBody(); logger.info(responseBody); }catch (Exception ex){ ex.printStackTrace(); logger.info("=======>查询出错",ex); } } /** * 对double类型数据保留小数点后多少位 * 高德地图转码返回的是 小数点后6位,为了统一封装一下 * @param digit 位数 * @param in 输入 * @return 保留小数位后的数 */ public static double dataDigit(int digit,double in){ return new BigDecimal(in).setScale(6, BigDecimal.ROUND_HALF_UP).doubleValue(); } /** * 将火星坐标转变成百度坐标 * @param lngLat_gd 火星坐标(高德、腾讯地图坐标等) * @return 百度坐标 */ public static MyPoint bd_encrypt(MyPoint lngLat_gd) { double x = lngLat_gd.getLon(), y = lngLat_gd.getLat(); double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI); double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI); return new MyPoint(dataDigit(6,z * Math.cos(theta) + 0.0065),dataDigit(6,z * Math.sin(theta) + 0.006)); } }
-
Flutter集成高德地图获取定位信息
2021-01-21 19:44:32首先需要在高德开放平台注册一个用户,并申请一个key和你的项目相关联,地址:https://lbs.amap.com/登录后进入:控制台→应用管理→我的应用→创建新应用→添加key(底下附上流程) 应用名称随便填写,符合... -
高德地图 点击获取坐标
2018-08-10 15:00:24* 点击获取坐标 * @param e */ function getLnglat(e) { map.clearMap(); var x = e.lnglat.getLng(); var y = e.lnglat.getLat(); document.getElementById("latDiv").innerHTML = '[' + x + "," + y + ']'... -
WGS84(国际通用坐标系)GCJ02(中国火星坐标系,高德地图坐标系)BD09(百度地图坐标系)-matlab开发
2021-05-29 09:41:07主要完成常见坐标系的转换,包括: WGS84(国际通用坐标系)<--->GCJ02(中国火星坐标系,高德地图坐标系)<--->BD09(百度地图坐标系) -
高德地图API拾取坐标并赋值,可通过搜索框进行搜索获取
2019-09-07 17:49:07高德地图API,拾取坐标,可通过点击地图获取,也可以通过搜索框进行搜索获取,带点标记 -
C# 高德地图百度地图计算两点坐标距离
2018-09-30 00:22:48C# 高德地图百度地图计算两点坐标距离,返回两点之间的距离 -
高德地图坐标拾取
2021-11-12 13:44:40<div class="getCoordinate" style=...坐标拾取</div> //坐标拾取组件 <div class="mapbox" v-show="map.showMap"> <div class="searchDiv" style="display: flex;align-items: center"> -
百度地图坐标转高德地图坐标
2021-12-29 16:24:10百度地图坐标转为高德地图坐标 -
高德地图坐标与百度坐标转换问题
2022-03-28 21:38:04最近开发了一个手动取点(获取精度极高的点地理位置)的...首先肯定不是web上是百度的,造成的坐标系的问题,下面给出在移动端取的点,以及百度地图坐标系转化后的,web上高德自己的 移动端: 高德web上的 ... -
全国省市区乡镇街道四级行政区json数据,含城市电话区号,行政编码,高德地图坐标系准确的中心点和边界线。
2020-09-30 10:58:12全国省市区乡镇街道四级行政区json数据,含城市电话区号,行政编码,高德地图坐标系准确的中心点和边界线。