方法一:搜狐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控制台网址时 如下操作进入控制台(通过上面地址进入控制台的直接跳过此操作,看二:获取秘钥)
- 注册百度账号
- 搜索百度地图api 进入官网 或者点击 百度地图api网站
- 进入网站 登录账号 选择功能与服务–定位
页面下滑,有个更多功能,这里我就选位置语义化 进入网页后有获取秘钥栏 点击这里就可以进入api控制台
二:获取秘钥
点击创建应用,将会进入如下页面
应用名称和应用类型根据自身需求写,白名单若不做任何要求直接* 然后提交
提交成功后,可以看到我们的应用上多了一个申请的密钥信息,我们所需要的就是访问应用(AK)。复制就行了。
最后 复制的这个就是秘钥啦 到此结束
声明:本文部分内容参考其他网页写法,因时间久远,找不到出处,若侵权可联系我删除 谢谢!