在vue项目引入天地图，根据经纬度获取具体地址

最新推荐文章于 2024-05-19 23:03:29 发布
最新推荐文章于 2024-05-19 23:03:29 发布
阅读量1.8k 收藏 6
点赞数
分类专栏： 天地图 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38331749/article/details/124926673
版权

1、申请key

天地图地图服务对所有用户开放。使用本组服务之前，需要申请Key

2、引入API

地图API是由JavaScript语言编写的，您在使用之前需要通过<script>标签将API引用到页面中：

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>

在vue项目中，我们在public文件夹的index.html中引入天地图的api文件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script defer src="//static.gdzwfw.gov.cn/mhyy/browser-upgrade/index.js"></script>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but aba-init-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="root"></div>
  </body>
</html>

3、在vue页面中，创建一个tiandiMap.vue页面，初始化地图，代码如下：

<template>
  <div>
    <div id="divwxMap" class="divwxMap" style="width: 100%;height: 580px;"></div>
    <div style="margin-top:10px;width:100%">
      <label for="">选中的地址：</label>
      <gd-input
        style="width:88%"
        v-model="address">
      </gd-input>
    </div>
  </div>
</template>

<script type="text/javascript">
  import { mapActions } from 'vuex';
  export default {
    components: {
    },
    data () {
      return {
        wxMap: '',
        address: '',
        markerTool: '',
        addrResult: {},
      };
    },
    mounted () {
      this.initwxMap();
    },
    methods: {
      ...mapActions([
        'getGeocoder',
      ]),
      // 初始化天地图
      initwxMap () {
        // vue项目需要先声明 T = window.T
        let T = window.T;
        this.wxMap = new T.Map('divwxMap'); // div的id
        // 传参中心点经纬度，以及放大程度，最小1，最大18
        this.wxMap.centerAndZoom(new T.LngLat(113.86942, 35.30416), 18);
        var cp = new T.CoordinatePickup(this.wxMap, { callback: this.getLngLat });
        cp.addEvent();
      },
      getLngLat (lnglat) {
        let T = window.T;
        console.log('获取的经纬度');
        const x = lnglat.lng.toFixed(6);
        const y = lnglat.lat.toFixed(6);
        this.wxMap.clearOverLays(); // 清空原来的标注点
        let point = new T.LngLat(x, y);
        let marker = new T.Marker(point);
        this.wxMap.addOverLay(marker); // 添加标注点
        this.getGeocoderFun(x, y);
      },
      // 根据经纬度获取地址
      async getGeocoderFun (lon, lat) {
        this.$loading.show('查询中...');
        const query = {
          postStr: {
            lon,
            lat,
            ver: '1',
          },
          type: 'geocode',
          tk: '7b733691924fcd55d8724722172a0664',
        };
        try {
          const res = await this.getGeocoder({ query });
          this.$loading.hide();
          if (res.status === '0') {
            const result = res.result;
            this.address = result.formatted_address;
            this.addrResult = result;
          }
        }
        catch (e) {
          this.$loading.hide();
        }
      },
      getAddress () {
        return this.addrResult;
      },
    },
  };
</script>

<style lang="stylus" scoped>
</style>

效果：

 

小丑鱼20210316
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
QGIS-申请天地图key并加载在线地图，在线图源坐标系差异
weixin_42342717的博客
12-28 5651
从2019年1月1日起，调用天地图的地图服务都需要申请开发接口，通过申请的key构建url地址并在QGIS加载。
高德地图根据经纬度获取详细地址
10-19
高德地图根据经纬度获取详细地址（js）。内无key，请自行使用自己的高德地图key
天地图api-地址选择-获取经纬度和详细地址
josiecici的博客
06-08 1万+
需求：在地图上点选或搜索选中后将经纬度和详细地址传给表单
uniapp 中 通过经纬度获取地址详情(vue)
别人笑我太疯癫 我笑他人看不穿 流水落花春去也 游戏人间
04-11 4140
需要第三方地图的支持 本文以百度地图为例 第一步 安装百度地图插件 npm install vue-baidu-map --save 成功后在main.js 中引入百度地图 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: "rQxHPQX1ua21rWnXzTbUh5KSSUbnefxR"//你自己的ak }) 第二部 在页面中添加百度地图组件 此步骤必须有，不用显示直接 v-show="false" <v...
vue如何调用天地图API来实现区域搜索
最新发布
qq_43474235的博客
05-19 416
【代码】vue如何调用天地图API来实现区域搜索。
Vue获取当前的位置信息、经纬度
热门推荐
qq_64800373的博客
07-01 1万+
通过navigator.geolocation对象中的getCurrentPosition() 函数获取用户当前定位位置。这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。注意： getCurrentPosition() 会尽快返回一个低精度结果，这在您不关心准确度只关心快速获取结果的情况下很有用。 navigator.geolocation.getCurrentPosition()用法：...
uniapp 添加地图标记点
m0_51707053的博客
06-20 3481
uniapp 地图标注点
vue 获取用户地理位置以及经纬度
m0_64512327的博客
04-24 2540
步骤一：在页面生命周期函数里面加载以下代码（当前使用的axios请求）此时的ip变量已经被处理为地理位置以及经纬度。步骤二：vue 可能会拦截请求 导致跨域问题。可以在vue.config.js中进行代理。注意：原生jq ajax可以使用以下代码。） ，申请流程很简单。
vue项目中使用天地图
01-08
2.创建自己的vue项目，这里就不说了 3.将 引入到你项目中的index.html文件中 4.创建map.vue文件 <!-- 点击画多边形 --> export default { data(){ return{ } }, created(){ }, mounted(){ ...
在vue中使用天地图dome
05-31
在Vue项目中，我们需要在合适的地方引入天地图的API库，并根据需求调用相应的函数。 3. **轨迹图添加**：在地图上显示轨迹数据，通常需要将轨迹数据解析为坐标点数组，然后利用天地图API创建线图层或轨迹动画效果。...
vue 实现Web端的定位功能 获取经纬度
10-16
主要介绍了vue 实现Web端的定位功能获取经纬度，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
arcgis使用天地图综合示例
02-28
前段时间研究了下arcgis，尝试了在arcgis中使用天地图资源，在网上找了不少资料，终于成功的在arcgis中用上了天地图。不过，貌似只用的到天地图提供的图层资源，用不上天地图的搜索查询服务。本例中，切换底图的功能访问的服务是我本地arcgis服务器上发布的图层服务，你们可能用不了，不过其他功能应该没问题。
Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）
Wuyo_7的博客
07-10 1万+
最近项目需要用到天地图，要引入到Vue项目中，鉴于官网没有相关的说明文档，在这里我记录一下我所使用的引入方法，可能不是很好，希望有更好的方法大佬能教一下我。 第一步，在Vue项目文件夹public下的index.html入口文件中加入天地图API JS文件。 引入天地图JavaScript API文件 <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></scrip
cesium如何加载天地图数据API？
weixin_43844000的博客
03-23 411
本质就是geoserver服务，可以打开http://gisserver.tianditu.gov.cn/看他的服务有哪些。 cesium需要使用WebMapServiceImageryProvider进行调用，url、layers、parameters不可或缺！！！！！！！ 实例代码： function addWmsImagery(viewer) { var provider = new Cesium.WebMapServiceImageryProvider({ .
cesium 调用天地图的两种方式
liyan_gis的专栏
05-24 6348
Cesium调用天地图可以使用wmts方式加载，还可以使用url模板的方式加载，效果如图所示： 本文以天地图影像为例，如果想加矢量图或者地形晕圈图，可以私信我。 方式一：wmts的方式 看下官网的说明： 提供由兼容WMTS 1.0.0的服务器提供的平铺图像。此提供程序支持HTTP KVP编码和RESTful GetTile请求，但不支持SOAP编码。 下面标出了比较重要的构造参数的参数 下面是具体代码： viewer.imageryLayers.addImageryPr...
vue项目使用百度地图API获取经纬度上送后端获取位置
Aom_yt的博客
11-30 1985
一、首先在百度api注册获得ak密钥 二、进行引入 第一种方式： 直接在vue中index.html中用script标签引入。 //你的ak密钥需要替换真实的你的ak码 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak密钥"></script> 第二种方式...
vue中使用天地图api
ctCheng的博客
11-26 1594
如何在vue中使用天地图绘制地图参考天地图官方demo去写就好了具体使用的实例 参考天地图官方demo去写就好了 链接: http://lbs.tianditu.gov.cn/api/js4.0/examples.html. 具体使用的实例 正常的话把里面的坐标、秘钥和图片地址换一下就直接可以用，我对里面的一部分不适合展示的东西做了删减，没有专门去测试，不过应该也没什么大问题，有问题照着报错改就好啦，我估计99%是没问题的，我就不测试了，哈哈哈 //我用的是vue-cli 4.0的，别的应该也差不多，在pu
cesium实现天地图加载调用
专注GIS开发
02-20 3928
cesium实现天地图的加载调用
vue集成cesium入门教程（2）加载各类地图（高德/天地图/Mapbox等）
向心行者
10-09 5939
这篇内容是《vue集成cesium入门教程》的第二篇，这里将记录通过Cesium加载高德、天地图、Mapbox等地图。将分别介绍三种地图的接入方法，其中可能会涉及到的用户注册获取token等内容。注册Mapbox后，登录到Mapbox后，进入该页面，可以创建自定义的地图。创建好的地图样式如下所示：通过上述操作，我们可以获取自定义地图的accessToken和styleId等信息，这个在代码中需要用到。如果第一次创建地图，需要点击“New style”按钮，然后选择模板。
vue引入高德地图根据输入定位并获取经纬度和地址
07-15
### 回答1： 在Vue中引入高德地图并根据输入内容实现定位并获取经纬度和地址，可以按照以下步骤进行： 1. 首先，需要在项目中引入高德地图的JS API。可以通过在index.html文件中引入高德地图的JS文件来实现，例如在head标签内添加以下代码： ```html <script src="https://webapi.amap.com/maps?v=1.4.15"></script> ``` 2. 在Vue组件中，可以通过在mounted钩子函数中初始化地图对象，如下所示： ```javascript mounted() { this.initMap(); }, methods: { initMap() { // 创建地图对象 const map = new AMap.Map("mapContainer", { zoom: 14 // 设置地图的缩放级别 }); // 使用Autocomplete组件实现输入提示 const autoComplete = new AMap.Autocomplete({ input: "inputContainer" // 设置输入提示的输入框 }); // 输入提示选中事件监听 AMap.event.addListener(autoComplete, "select", e => { // 获取选中的结果 const location = e.poi.location; // 获取经纬度 const address = e.poi.district + e.poi.address; // 获取地址 console.log("经纬度：", location); console.log("地址：", address); }); } } ``` 上述代码中，首先在mounted钩子函数中初始化了地图对象，并设置了地图的缩放级别。然后使用Autocomplete组件来实现输入提示，将输入提示关联到输入框（id为inputContainer）。接着，监听Autocomplete组件的select事件，在事件处理函数中获取选中的结果，包括经纬度和地址。 3. 在Vue模板中，需要添加包含地图和输入框的元素，如下所示： ```html <template> <div> <input id="inputContainer" type="text" placeholder="请输入地址" /> <div id="mapContainer"></div> </div> </template> ``` 上述代码中，输入框使用id为inputContainer，并在初始化地图对象中将其设置给Autocomplete组件，地图容器使用id为mapContainer。 通过以上步骤，在Vue中可以引入高德地图并实现根据输入的定位，并获取对应的经纬度和地址。 ### 回答2： 在Vue中引入高德地图定位并获取经纬度和地址需要以下步骤： 1. 在项目中安装高德地图的JavaScript API库，可以使用npm安装：npm install @amap/amap-jsapi-loader。 2. 在Vue组件中引入amap-jsapi-loader库。在需要显示地图的组件中，可以使用以下代码进行引入： ```javascript import AMapLoader from '@amap/amap-jsapi-loader'; export default { data() { return { mapInstance: null, location: null, address: null, } }, mounted() { this.loadMap(); }, methods: { loadMap() { AMapLoader.load({ key: 'YOUR_AMAP_KEY', version: '2.0', // 高德地图API的版本号 plugins: ['AMap.Geolocation'], }).then((AMap) => { this.mapInstance = new AMap.Map('mapContainer'); this.addGeolocationControl(); }).catch((error) => { console.log('地图加载失败：', error); }); }, addGeolocationControl() { this.mapInstance.plugin('AMap.Geolocation', () => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, timeout: 10000, buttonOffset: new AMap.Pixel(10, 10), }); geolocation.getCurrentPosition((status, result) => { if (status === 'complete') { this.location = result.position; //获取经纬度 this.address = result.formattedAddress; //获取地址 } }); this.mapInstance.addControl(geolocation); }); }, }, } ``` 3. 在组件的template中添加一个包含地图的div元素，并绑定id为'mapContainer'： ```html <template> <div> <div id="mapContainer"></div> <div>经度：{{location.lng}}</div> <div>纬度：{{location.lat}}</div> <div>地址：{{address}}</div> </div> </template> ``` 4. 在Vue组件中的data属性中定义location和address两个变量，用于存储定位的经纬度和地址。 5. 在组件的mounted生命周期钩子中调用loadMap方法，该方法会加载地图和Geolocation插件，并创建地图实例。 6. 在addGeolocationControl方法中创建Geolocation实例，并通过getCurrentPosition方法获取当前位置的经纬度和地址。定位成功后，将结果存储在组件的data属性中。 7. 在template中使用插值表达式显示定位结果。 注意：在代码中的'YOUR_AMAP_KEY'需要替换为你在高德地图开发者平台申请的API Key。同时，请根据实际情况进行适当的样式和错误处理。 ### 回答3： 要实现在Vue中引入高德地图，并根据用户输入定位并获取经纬度和地址，可以按照以下步骤进行操作： 1. 在Vue项目中使用npm安装高德地图SDK: ``` npm install vue-amap --save ``` 2. 在Vue的main.js文件中引入高德地图模块，并进行配置： ```javascript import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: 'your-amap-api-key', plugin: ['Geocoder'], }); ``` - 'your-amap-api-key'是你在高德地图开放平台上申请的API Key。 3. 创建一个组件，用于输入位置信息和显示地图： ```vue <template> <div> <input v-model="address" placeholder="请输入位置信息" /> <button @click="getLocation">获取经纬度和地址</button> <div>{{latitude}}, {{longitude}}</div> <div>{{formattedAddress}}</div> <div id="mapContainer"></div> </div> </template> <script> export default { data() { return { address: '', latitude: '', longitude: '', formattedAddress: '', }; }, methods: { getLocation() { const geocoder = new AMap.Geocoder(); geocoder.getLocation(this.address, (status, result) => { if (status === 'complete' && result.info === 'OK') { this.latitude = result.geocodes[0].location.lat; this.longitude = result.geocodes[0].location.lng; this.formattedAddress = result.geocodes[0].formattedAddress; this.showMap(); } }); }, showMap() { // 使用AMap.Map来展示地图，根据this.latitude和this.longitude进行定位 }, }, mounted() { this.$nextTick(() => { // 根据DOM元素id（'mapContainer'）来展示地图 }); }, }; </script> ``` 以上代码中，我们通过`v-model`指令绑定input的值到Vue实例的`address`属性。当点击“获取经纬度和地址”的按钮时，调用`getLocation`方法获取经纬度和地址，并展示在页面上。接着，我们可以使用`AMap.Map`来展示地图，根据`this.latitude`和`this.longitude`来定位地图。这里只提供一个简单的演示，具体地图展示的功能根据项目需求进行更详细的配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值