文档章节

vue 定位

o
 osc_ogi0qclx
发布于 2019/08/23 16:05
字数 332
阅读 9
收藏 0

1.vue中index.html:

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=d4332e5adb8b584442266763d20b978c"></script>
 
2.新建一个js(我习惯建在static目录下)
/**
* 高德地图定位
*/
export const location = {
  initMap(id) {
    let mapObj = new AMap.Map(id, {})
    let geolocation;
    mapObj.plugin(['AMap.Geolocation'], function () {
      geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位,默认:true
        timeout: 10000, // 超过10秒后停止定位,默认:无穷大
        maximumAge: 0, // 定位结果缓存0毫秒,默认:0
        convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true
        showButton: true, // 显示定位按钮,默认:true
        buttonPosition: 'LB', // 定位按钮停靠位置,默认:'LB',左下角
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
        showMarker: true, // 定位成功后在定位到的位置显示点标记,默认:true
        showCircle: true, // 定位成功后用圆圈表示定位精度范围,默认:true
        panToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认:true
        zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
      })
      mapObj.addControl(geolocation)
      geolocation.getCurrentPosition()
    })
    return geolocation;
  }
}
 
3.在指定文件script:
  import { location } from "../../../static/location.js";
  
  methods: {
    getLocation() {
      let that = this;
      let geolocation = location.initMap("map-container"); //定位
      AMap.event.addListener(geolocation, "complete", result => {
        console.log(result)
        that.lat = result.position.lat;
        that.lng = result.position.lng;
        that.province = result.addressComponent.province;
        that.city = result.addressComponent.city;
        that.district = result.addressComponent.district;
      });
    }
  },
  mounted() {
    this.getLocation(); // 调用获取地理位置
  }
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

李开复谈2020年AI科学家创业。道翰天琼认知智能api机器人接口。

2012年至今,在深度学习推动下,这一波人工智能的蓬勃发展已进入第十个年头。 在初期,一系列由AI科学家创建的初创公司,经过大浪淘沙,如今已有多家脱颖而出成为独角兽企业;榜样在先,于是...

jackli2020
21分钟前
9
0
什么是PHP中的线程安全或非线程安全? - What is thread safe or non-thread safe in PHP?

问题: I saw different binaries for PHP, like non-thread or thread safe? 我看到了PHP的不同二进制文件,例如非线程还是线程安全的? What does this mean? 这是什么意思? What is the ...

fyin1314
34分钟前
26
0
移动社交如何玩?网易云信携手崽崽和Uki打造更多新场景!

随着95后、00后为主的年轻一代逐渐成为中国移动社交下的主力军,社交需求也发生了一些变化。这些年轻用户更倾向于有趣好玩,形式多样化的社交方式。同时也产生了如“扩列”、“养火花”等众多...

真正稳定的网易云信
41分钟前
22
0
如何在Java代码中去掉烦人的“!=null”

问题 为了避免空指针调用,我们经常会看到这样的语句 if (someobject != null) { someobject.doCalc();} 最终,项目中会存在大量判空代码,多么丑陋繁冗!如何避免这种情况?我们是否滥...

码农突围
41分钟前
21
0
ELK使用容器集成安装

ELK使用容器集成安装 1. 查看集成ELK:sebp docker search sebp 2. 设置内核参数 sysctl -w vm.max_map_count=262144 3. 拉取sebp/elk docker pull sebp/elk 4. 运行ELK yum install -y java......

huanke
51分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部