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

内容导航：

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

vue加载高德地图（原生）

vue3.0+ts使用原生高德地图解决方法

如何使用高德地图API(搜索POI)

一、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文件吗，在此文件中写入以下代码（因为大部分地图显示的时候，都不显示“市”这个字，所以把它替换掉）。

<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>

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

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

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

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

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

页面效果：

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

一、vue加载高德地图（原生）

1. 在 public 文件夹下的 index.html 中加入

///

2. 在 vue.config.js 文件中配置 externals

///module.exports = {

  devServer: {

    port: 57103 // 端口号配置

  },

  configureWebpack: {

    externals: {

      'AMap': 'AMap' // 高德地图配置

    } }}

注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。

3.加载地图

地图容器要给他一个宽高。

注：init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到 html 元素 div#container

注2:若中途遇到 'map' is assigned a value but never used

可找到package.json中找到rules:{} 添加 "no-unused-vars":0

最终效果

高德API：

二、vue3.0+ts使用原生高德地图解决方法

1.引入高德sdk

2.为了防止打包时把高德纳入，我们需要在webpack中配置，这里以vue.config.js为例

3.声明文件，用了typescript，那么就是想运用到它的类型提醒功能，那么必不可少地需要引入高德地图的声明文件，由于官方也没有给出，我们只能根据api文档来自己书写自己需要用到的函数声明，下面是我们项目中大部分会用到的声明，可以在src目录下新建一个types文件夹专门用于存放声明文件：
src/types/Amap.d.ts:

4.找到tsconfig.json文件，配置上声明文件

5.接下来就可以在页面中快乐的使用了

三、如何使用高德地图API(搜索POI)

1.导入pandas模块,调用中会使用到pandas中的DataFrame函数

2.引出pandas中的常用的表格型数据结构DataFrame函数

3.导入requests模块，用于API网页请求

4.导入json,tsv模块

第一步，申请”Web服务API”密钥（Key）；

第二步，拼接HTTP请求URL，第一步申请的Key需作为必填参数一同发送；

第三步，接收HTTP请求返回的数据（JSON或XML格式），解析数据。

如无特殊声明，接口的输入参数和输出数据编码全部统一为UTF-8。(此三步摘自高德API开发者指南)

data 设置你需要请求数据的类型，并且将参数以字典形式赋值给data

使用pandas模块中的表格型数据结构DataFrame函数