vue 高德地图逆地理编码

vue 高德地图逆地理编码
摘要由CSDN通过智能技术生成

当高德地图精准定位失败时,在 onError 事件处理函数中调用方法 getLatLngLocation 当前为使用非精准定位 ip 定位,查询到当前所在城市的相关信息,然后进行逆地理编码。

如下:

created(){
   
 	this.getLocation()
},
methods: {
   
  getLocation(){
    // 从高德地图api获取浏览器定位
    const that = this
    AMap.plugin('AMap.Geolocation', function() {
   
      let geolocation = new AMap.Geolocation({
   
        // 是否使用高精度定位,默认&#
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 高德地图地理编码可以使用 AMap JavaScript API 实现。以下是一个简单的示例: 首先需要在 `index.html` 中引入高德地图 JavaScript API: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=your-amap-key"></script> ``` 然后在 Vue 组件中,可以使用以下代码获取当前位置的地理编码信息: ```vue <template> <div> <div ref="map" style="width: 100%; height: 400px;"></div> <div>{{ address }}</div> </div> </template> <script> export default { data() { return { address: "" }; }, mounted() { // 创建地图 const map = new AMap.Map(this.$refs.map, { zoom: 16 }); // 获取当前位置 map.plugin("AMap.Geolocation", () => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位,默认为 false timeout: 10000, // 超过 10 秒后停止定位,默认值为 无穷大 maximumAge: 0, // 定位结果缓存时间,默认值为 0 convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认为 true showButton: true, // 显示定位按钮,默认为 true buttonPosition: "LB", // 定位按钮的位置,默认为 'LB',左下角 buttonOffset: new AMap.Pixel(10, 10), // 定位按钮距离容器左下角的偏移量,默认为 Pixel(10, 20) showMarker: true, // 定位成功后在定位到的位置显示点标记,默认为 true showCircle: true, // 定位成功后用圆圈表示定位精度范围,默认为 true panToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认为 true zoomToAccuracy: true // 定位成功后自动调整地图缩放级别以适合定位结果的范围,默认为 true }); geolocation.getCurrentPosition((status, result) => { if (status === "complete") { this.getAddress(result.address); } else { console.log("获取当前位置信息失败"); } }); }); }, methods: { // 地理编码 getAddress(address) { this.address = address; } } }; </script> ``` 在 `mounted` 钩子函数中,我们使用 `AMap.Geolocation` 插件获取当前位置信息。然后在 `getCurrentPosition` 回调函数中,我们通过 `result.address` 获取当前位置的地理编码信息,并将其赋值给 `this.address`,以在页面中显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值