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

左手的ㄟ右手 2023-03-13 03:43 2阅读 0赞

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

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

如下图：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]

1.  打开浏览器，搜索“高德api”，点击进入  
    ![在这里插入图片描述][20200510183528262.png]
2.  如未注册，点击右上方进行注册，登录后点击头像旁边的控制台  
    ![在这里插入图片描述][20200510183751520.png]
3.  此时，展开左侧菜单栏中的“应用管理”，点击“我的应用”  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]
4.  点击右上方“创建新应用”

例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 2]

1.  此时，在刚才创建的应用左侧点击“添加”  
    ![在这里插入图片描述][20200510184535809.png]
2.  输入“Key名称”，选择对应的“服务平台”，勾选条款，点击“提交”

例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 3]

1.  此时会产生一串key值，留存备用  
    ![在这里插入图片描述][20200510184941172.png]
2.  回到“首页”，在搜索框输入“citySearch”  
    ![在这里插入图片描述][20200510185136432.png]
3.  点击“示例”  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 4]
4.  复制图中所示代码  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 5]
5.  将以上代码粘贴到项目中public目录下的index.html文件中，并且把代码中“您申请的key值”改为上面第10步的那个key值  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 6]
6.  封装这个定位的方法：  
    在src目录下，创建一个目录，比如叫“util”。再在util目录下创建一个文件，比如叫“location.js”，在此文件中写入以下大框内的内容（椭圆框中的都删掉）：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 7]
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][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，此时浏览器控制台里就可以看到目前所在的位置  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 8]
2.  如果想在页面上看到位置图形的话，只需要把17步中

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

页面效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 9]

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

--------------------

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/ec36ad57bb33428e8b1e619437e27297.png
[Vue-CLI]: https://huangfuyk.blog.csdn.net/article/details/105667184
[20200510182912475.png]: /images/20230312/24fa8b907e674707832804a7f367d42d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]: /images/20230312/4a4e91d506f04c5590a2337c882df222.png
[20200510183528262.png]: /images/20230312/067e6bbd3266419ca7b8f9f0b8b67e6d.png
[20200510183751520.png]: /images/20230312/4e37b13700e243618f84e41152be5933.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]: /images/20230312/009b889c47884ed18956e2db6a71361e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 2]: /images/20230312/42f47de56920428985cce670eb5afe27.png
[20200510184535809.png]: /images/20230312/4e106f6ad0d845899d4f96d3f41a1381.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 3]: /images/20230312/0c35aa84eb6240858a97a00fc301e237.png
[20200510184941172.png]: /images/20230312/c0800ba56ee745e587f49c460e76543d.png
[20200510185136432.png]: /images/20230312/c68f1de6dcc743d3a147e4129c774512.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 4]: /images/20230312/04518beb19084a99920ead5e68f7d422.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 5]: /images/20230312/c2f10c2fe2c142f4815391663428950f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 6]: /images/20230312/29dca1fe2dac45ff9c01da4d31bfcde8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 7]: /images/20230312/63e8c6e7d07440258b9e8e12d4cf7888.png
[JavaScript _-String]: https://huangfuyk.blog.csdn.net/article/details/104458753
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 8]: /images/20230312/db06a74c93794fedb8dbe0e10cc7709a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 9]: /images/20230312/f7592b93357d41a5af45bf28c0d06de5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 10]: /images/20230312/e8b73e8ccb144095b5c91e50ee24b985.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230312/767e5385ec134f8d9e7771e994e920f5.png