vue项目中使用高德地图的api实现城市的定位

今天女朋友突发奇想,让我帮她做一个可以对所在城市进行自动定位的一个小功能。我二话没说,打开电脑就是一顿操作,操作记录如下(贼拉拉详细,无论小白还是大白,都可看得懂):
在这里插入图片描述

  1. 使用Vue-CLI构建一个Vue项目。
  2. 在src目录下的views目录里创建一个City.vue(名字自取)
    在这里插入图片描述
  3. 在src目录下的router目录下的index.js文件中增加如图所示内容(path值可自取,component值则要对应第2步创建的文件夹名)

如下图:在这里插入图片描述

  1. 打开浏览器,搜索“高德api”,点击进入
    在这里插入图片描述

  2. 如未注册,点击右上方进行注册,登录后点击头像旁边的控制台
    在这里插入图片描述

  3. 此时,展开左侧菜单栏中的“应用管理”,点击“我的应用”
    在这里插入图片描述

  4. 点击右上方“创建新应用”

例:
在这里插入图片描述

  1. 此时,在刚才创建的应用左侧点击“添加”
    在这里插入图片描述

  2. 输入“Key名称”,选择对应的“服务平台”,勾选条款,点击“提交”

例:
在这里插入图片描述

  1. 此时会产生一串key值,留存备用
    在这里插入图片描述

  2. 回到“首页”,在搜索框输入“citySearch”
    在这里插入图片描述

  3. 点击“示例”
    在这里插入图片描述

  4. 复制图中所示代码
    在这里插入图片描述

  5. 将以上代码粘贴到项目中public目录下的index.html文件中,并且把代码中“您申请的key值”改为上面第10步的那个key值
    在这里插入图片描述

  6. 封装这个定位的方法:
    在src目录下,创建一个目录,比如叫“util”。再在util目录下创建一个文件,比如叫“location.js”,在此文件中写入以下大框内的内容(椭圆框中的都删掉):
    在这里插入图片描述

  7. 因为我的初衷就只是为了看自己的位置,所以此处用一个回调函数把异步的结果传回来

把第15步的代码修改一下,如下:

export const getLocation=(box,callback)=>{
    var map = new AMap.Map(box, {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });
    //实例化城市查询类
    var citysearch = new AMap.CitySearch();
    //自动获取用户IP,返回当前城市
    citysearch.getLocalCity(function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            if (result && result.city && result.bounds) {
                var cityinfo = result.city;
                var citybounds = result.bounds;
                callback(cityinfo)
                //地图显示当前城市
                map.setBounds(citybounds);
            }
        } else {
            callback(result.info)
        }
    });
}
  1. 还记得第2步创建的City.vue文件吗,在此文件中写入以下代码(因为大部分地图显示的时候,都不显示“市”这个字,所以把它替换掉)。
    PS:对字符串方法不是很了解的小伙伴,可参考这篇:JavaScript 内置对象之-String
<template>
  <div>
    <div id="box" v-show="false"></div>
  </div>
</template>

<script>
import { getLocation } from "@/util/location";
export default{
    mounted(){
        getLocation("box",(data)=>{
        console.log(data.replace("市",""))
        })
    }
}
</script>
  1. 使用npm run serve命令,重启服务器,在网址栏输入http://localhost:8080/city,此时浏览器控制台里就可以看到目前所在的位置
    在这里插入图片描述

  2. 如果想在页面上看到位置图形的话,只需要把17步中

<div id="box" v-show="false"></div>

中的v-show="false"删除,加个样式即可,如下:

<div id="box" style="width:100%;height:300px"></div>

页面效果:
在这里插入图片描述

  1. 操作结束,女朋友很高兴,奖励我最爱的大kiss!
    在这里插入图片描述

真的是小白都能看懂的“白话文”,整理不易,希望各路大佬点个赞呗~~
在这里插入图片描述

©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值