[feature] 定位功能 about vue-amap HOT 30 CLOSED

暂时没有。如果有这方面的需求，我们会在新版本中，尽快加上。

能多谈下具体的场景以及想以怎样的方式，将协助我们更好地设计这个特性。

@reversesoul

from vue-amap.

最简单的，在OA系统中，比如考勤，就需要获取当前的经纬度和地址信息。这个是硬性需求。如果能在新版本中加上，真的感激不尽。

from vue-amap.

明白了，请给我们几天时间。

from vue-amap.

谢谢！

from vue-amap.

@reversesoul @AIluffy

其实现在这个版本是支持这个功能的，只是在文档中没有体现。第一觉得觉得不够友好，第二 init 事件是个隐藏事件。如果现在需要用的话，可以这样。

1. 引入定位插件

AMap.initAMapApiLoader({
  key: 'YOUR_KEY',
  plugin: [..., 'Geolocation']
});

2. 配置插件

export default {
  self self = this;

  data() {
    return {
       plugin: [{
          pName: 'Geolocation',
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                self.center = [result.position.lng, result.position.lat];
              });
            }
          }
       }]     
     };
  }
}

from vue-amap.

谢谢，最近有在研究你们的组件，希望越做越好

from vue-amap.

有没有events, 可以只获取当前位置信息并存储在data中, 而地图不定位到那里, 看起来init事件会自动将地理位置定位到当前位置. 尝试过complete event, 没有起作用.

from vue-amap.

@AIluffy

complete 我也尝试过，似乎只有调用 getCurrentPosition 后才会触发。

from vue-amap.

只有用HTML5的Geolocation API了, 不过定位效果不理想

from vue-amap.

@AIluffy

你这样试试，加一个三个隐藏定位图标的参数。

export default {
  self self = this;

  data() {
    return {
       plugin: [{
          pName: 'Geolocation',
          // 隐藏定位
          showButton: false,
          showMarker: false,
          showCircle: false,
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                self.center = [result.position.lng, result.position.lat];
              });
            }
          }
       }]     
     };
  }
}

from vue-amap.

这样会把定位按钮去掉, 但是依然没有解决初始载入页面, 自动帮我定位到当前位置的问题.
预期展示:

实际展示:

from vue-amap.

@AIluffy

你好，没有太明白。现在能做的是定位到当前的经纬度，拿到这个以后，再想怎么做，不都是很随意的吗？你能贴下你的代码吗？也好说明一点，谢谢。

^_^

from vue-amap.

@AIluffy

data () {
            let self = this;
            
            return {
                isHide: true,
                zoom: 10,
                center: this.$store.state.targetGeolocation,
                currentGeolocation: [],
                plugin: [{
                    pName: 'Geolocation',
                    // 隐藏定位
                    showButton: false,
                    showMarker: false,
                    showCircle: false,
                    // ******* 添加这个属性  *******
                    panToLocation: false,
                    events: {
                        init(o) {
                          // o 是高德地图定位插件实例
                          o.getCurrentPosition((status, result) => { 
                             // ******* 把定位中心的代码去掉 ******* 
                          });
                        }
                    }
                }]  
            }
        }

from vue-amap.

非常感谢你的热心帮助, now it works O(∩_∩)O~~

from vue-amap.

@AIluffy

后续会把定位插件的文档补上。如果有问题欢迎继续提 issue。

如果问题已解决，请关闭这个 issue 谢谢。

from vue-amap.

@AxeMea 如果只是调用的高德的定位API或者其他的API，但是不调用地图显示，该怎么实现呢？

from vue-amap.

@marsal1212

有一种比较简单的方法，就是用样式隐藏地图。

from vue-amap.

这样的使用方法太....希望把amap的api接口直接开放出来，要不然只能自己去加载js实现了。

from vue-amap.

@marsal1212

你想要到的是不是，只是一个加载高德后的一个 promise，而不是实例化一个地图？

from vue-amap.

@AxeMea
恩，对的。得到AMap.event.addListener(geolocation, 'complete', onComplete)这个节点就可以了。

from vue-amap.

@marsal1212

Geolocation 插件提供了这个 event 的，只是必须要在页面上实例化一个地图。如果要不实例化地图，你可以试一下，自己动态创建一个 dom 元素，然后在脚本中实例化，不必要渲染到页面上，然后自己写加载定位的代码来做。然而这样，就不是 vue-amap 擅长做的了。

from vue-amap.

@AxeMea 请问一下使用定位插件的时候，定位失败，'Geolocation permission denied.'，这个要怎么解决？本地开发环境下ok，线上就不行了。

from vue-amap.

@SanhongWong

你好。可以参考下，高德官方的说明。

http://lbs.amap.com/api/javascript-api/reference/location#m_AMap.Geolocation

from vue-amap.

@AxeMea
thanks。找到问题了。我的虽说不是走https，但是在手机浏览器是可以的，它会弹出请求获取当前位置，而pc浏览器就不行。

from vue-amap.

你好可以问一下为什么我加上plugin会报错那
Uncaught (in promise) TypeError: a[c].split is not a function
at c.plugin (eval at (maps?key=YOUR_KEY&v=1.3&plugin=ToolBar,Geolocation&callback=amapInitComponent:19),

plugin: [{
pName: 'Geolocation'
}]

from vue-amap.

楼上的错误同样的遇到了，请问是什么问题
Uncaught (in promise) TypeError: a[c].split is not a function
at c.plugin (eval at (maps?key=YOUR_KEY&v=1.3&plugin=ToolBar,Geolocation&callback=amapInitComponent:19),

plugin: [{
pName: 'Geolocation'
}]

from vue-amap.

@YuDuoZhao @qianyinghuanmie

是否在 vue-amap 的初始化方法中，配置了 Geolocation 。

from vue-amap.

在初始化的地方配置过了
AMap.initAMapApiLoader({
// 高德的key
key: 'myKey',
// 插件集合
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation']
})
这样有问题吗？

from vue-amap.

额……好像没问题了，把这行代码删了再重新写复制一遍就好了，感谢作者了。

from vue-amap.

能给个Geolocation定位的demo吗
实在头疼呀

from vue-amap.