vue中获取获取当前城市地址_Vue使用百度地图获取当前城市

Vue使用百度地图获取当前城市

一：申请百度地图密匙

注册登录后需要进行开发者认证

创建应用

获取密匙AK

二：Vue项目使用

下载相应插件

html文件引入

创建一个新的js文件(下一步需要引入)

组件引入js并使用

效果

一：申请百度地图密匙

我们需要提前在百度地图开放平台申请密匙才能使用对应的接口去获取城市信息。

百度地图开放平台：http://lbsyun.baidu.com/apiconsole/center#/home

注册登录后需要进行开发者认证

主要是需要登记认证身份证，这环节需要身份证照片，认证很快，基本提交了一下就认证成功了。

创建应用

注意！Referer白名单一定要填写正确，域名不对是无法使用定位功能的！没上线的小伙伴如果仅仅是用来本地测试或者学习的就直接填写*，这样不管是什么域名都可以使用定位功能，但上线了就需要自行更改过来

获取密匙AK

二：Vue项目使用

下载相应插件

npm install bmap

html文件引入

创建一个新的js文件(下一步需要引入)

export default {

init: function (){

const AK = '3s9RVp........'; //你的AK

const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak="+ AK +"&s=1&callback=onBMapCallback";

return new Promise((resolve, reject) => {

// 如果已加载直接返回

if(typeof BMap !== 'undefined') {

resolve(BMap);

return true;

}

// 百度地图异步加载回调处理

window.onBMapCallback = function () {

resolve(BMap);

};

let getCurrentCityName = function () {

return new Promise(function (resolve, reject) {

let myCity = new BMap.LocalCity()

myCity.get(function (result) {

resolve(result.name)

})

}

// 插入script脚本

let scriptNode = document.createElement('script');

scriptNode.setAttribute(type, 'text/javascript');

scriptNode.setAttribute('src', BMap_URL);

document.body.appendChild(scriptNode);

});

}

组件引入js并使用

效果

vue中获取获取当前城市地址_Vue使用百度地图获取当前城市相关推荐

html5经纬度定位源码_利用HTML5定位功能获取经纬度，在根据经纬度利用百度地图获取位置信息...
一.引入相关js 二.js代码 // 单次位置请求执行的函数 function getLocation(){ navigator.geolocation.getCurrentPosition(mapI ...
Python爬取百度地图智慧交通-城市拥堵指数
第一次写文章分享一下我的大数据处理课程的一次作业,爬取百度地图智慧交通的城市拥堵指数内容,链接(以长春市为例):http://jiaotong.baidu.com/top/report/?cityc ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
根据ip获取经纬度_PHP使用百度地图获取指定地址坐标：创建AK（图文+视频）
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之创建AK(api key)的方法. 我们在前面的文章[PHP使用腾讯地图获取指定地址坐标:创建key][PHP使用腾讯地图获取指定地址坐标:经 ...
根据php经纬度百度地图打点,PHP使用百度地图获取指定地址坐标：经纬度（图文+视频）...
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之经纬度的实现方法. 在之前的文章[PHP使用百度地图获取指定地址坐标:创建AK]中,已经给大家介绍了如何在百度地图开放平台中创建AK(api ...
百度地图获取当前位置街道_轻松查看街道地址位置地图
百度地图获取当前位置街道 Have you found the address for a place that you would like to visit while browsing but ...
百度地图获取经纬度后，获取区域代码和地址
百度地图获取经纬度后,获取区域代码和地址: function getdistrct_code($location){$url ="api.map.baidu.com/geocoder/v2/ ...
JS 通过百度地图获取详细地址及经纬度
下方代码可以通过百度地图获取到经纬度和详细位置地址注意: <script type ="text / javascript"src ="http://api.ma ...

vue中获取获取当前城市地址_Vue使用百度地图获取当前城市

vue中获取获取当前城市地址_Vue使用百度地图获取当前城市相关推荐

最新文章

热门文章