vue项目中使用高德地图JS API进行精确定位并获取定位信息

vue项目中使用高德地图JS API进行精确定位并获取定位信息

注册账号并申请Key

  1. 首先,注册开发者账号,成为高德开放平台开发者

  2. 登陆之后,在进入「应用管理」 页面「创建新应用」
    vue项目中使用高德地图JS API进行精确定位并获取定位信息_第1张图片

  3. 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
    vue项目中使用高德地图JS API进行精确定位并获取定位信息_第2张图片
    这一步不是很难,应该很快就搞定了.

应用

1. 在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key;

因为咱们是vue项目所以直接在index.html中引用就行


2.使用JS API 进行定位

简单粗暴,咱们直接上代码吧




注意:一定要为地图容器指定高度、宽度,否则地图容器没有高宽地图是不显示的.
生成地图的就是逻辑要在页面元素加载完成后,所以要把生成地图逻辑写在mounted中,否则获取不到地图容器id生成不了地图.

效果图:
vue项目中使用高德地图JS API进行精确定位并获取定位信息_第3张图片

一步步来你一定没问题,希望对你有帮助,欢迎评论一起讨论.

你可能感兴趣的:(vue,问题总结,vue,高德地图定位)