vue获取用户当前城市 vue获取定位

方法一:搜狐api(推荐)

引用下面的js：

<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

直接获取IP和城市名：

alert(returnCitySN['cip'] + returnCitySN['cname']);

在window全局上有此属性 可直接window.returnCitySN访问

方法二:百度地图api(弊端要刷新一次才生效)

一:新建一个js文件

里面写此代码 暴露function
注意这里的ak是百度地图api的秘钥 自己注册账号 根据相关操作获取(末尾有写如何获取秘钥)

export function MP(ak) {
    return new Promise(function (resolve, reject) {
        window.onload = function () {
            resolve(window.BMap)//插入script标签后 会在window上挂一BMap属性,此为跨域获取的数据
        };
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=" + ak + "&callback=init";
        script.onerror = reject;
        document.head.appendChild(script);//插入此标签后 会在window上挂一BMap属性,此为跨域获取的数据
    })
}

二:引入上面的文件 并使用

此案例是点击组件 默认显示正在定位 获取到数据后会将内容"正在定位"改为所在城市

<template>
  <div class="about">
    <h1>{{city}}</h1>
  </div>
</template>
<script>
  import {MP} from '../assets/map.js';
  export default {
    data(){
      return {
        ak:'HwE0Q5oiZ6iOCu1AaPxiu28VKx57DZyi',//秘钥
        city:'正在定位'
      }
    },
    created() {
      this.getCity()
    },
    methods:{
      getCity() {
        this.$nextTick(()=>{
          MP(this.ak).then(BMap=> {
            //在此调用api
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(a=>{
              this.city = a.address.city;
            })
          })
        })
      }
    }
  }
</script>

拓展 如何获取秘钥

一:进入控制台:

a). API控制台的地址为：http://lbsyun.baidu.com/apiconsole/key
b). 当你不记得API控制台网址时 如下操作进入控制台(通过上面地址进入控制台的直接跳过此操作,看二:获取秘钥)

1. 注册百度账号
2. 搜索百度地图api 进入官网 或者点击 百度地图api网站
3. 进入网站 登录账号 选择功能与服务–定位
   
   页面下滑,有个更多功能,这里我就选位置语义化 进入网页后有获取秘钥栏 点击这里就可以进入api控制台
   

二:获取秘钥

点击创建应用，将会进入如下页面
应用名称和应用类型根据自身需求写,白名单若不做任何要求直接* 然后提交

提交成功后，可以看到我们的应用上多了一个申请的密钥信息，我们所需要的就是访问应用（AK）。复制就行了。

最后 复制的这个就是秘钥啦 到此结束

声明:本文部分内容参考其他网页写法,因时间久远,找不到出处,若侵权可联系我删除 谢谢!