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

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

使用Vue-CLI构建一个Vue项目。在src目录下的views目录里创建一个City.vue(名字自取)

在src目录下的router目录下的index.js文件中增加如图所示内容(path值可自取，component值则要对应第2步创建的文件夹名)

如下图：

打开浏览器，搜索“高德api”，点击进入

如未注册，点击右上方进行注册，登录后点击头像旁边的控制台

• 此时，展开左侧菜单栏中的“应用管理”，点击“我的应用”

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

例：

• 此时，在刚才创建的应用左侧点击“添加”

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

例：

• 此时会产生一串key值，留存备用

• 回到“首页”，在搜索框输入“citySearch”

• 点击“示例”

• 复制图中所示代码

• 将以上代码粘贴到项目中public目录下的index.html文件中，并且把代码中“您申请的key值”改为上面第10步的那个key值

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

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

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)        }    });}

• 还记得第2步创建的City.vue文件吗，在此文件中写入以下代码(因为大部分地图显示的时候，都不显示“市”这个字，所以把它替换掉)。

• 使用npm run serve命令，重启服务器，在网址栏输入http://localhost:8080/city，此时浏览器控制台里就可以看到目前所在的位置

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

• 中的v-show="false"删除，加个样式即可，如下：

页面效果：

操作结束，女朋友很高兴，奖励我最爱的大kiss！