Vue利用百度地图初始化页面定位

朱雀 2023-06-05 13:59 271阅读 0赞

# **Vue利用百度地图初始化页面定位** #

### **结果展示** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70][]

### **获取百度ak** ###

*  地址：[http://lbsyun.baidu.com/apiconsole/key][http_lbsyun.baidu.com_apiconsole_key]
 *  注册（认证）、创建应用得到ak（设置域名白名单）

### **引入控件** ###

*  npm install vue-baidu-map --save

### **main.js中引入** ###

import Vue from 'vue'; import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: '申请的百度地图秘钥' })

### **页面控件** ###

<div> <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" style="height: 65vh" @ready="handler" @click="getClickInfo"> <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation> <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> </baidu-map> </div>

### **js部分** ###

<script> export default { data() { return { center: {lng: 0, lat: 0}, //经纬度 zoom: 13 //地图展示级别 }; }, methods: { handler({BMap, map}) { this.zoom = this.zoom; let self = this; //关键词定位 map.centerAndZoom("太原", 11); //浏览器位置定位 // var geolocation = new BMap.Geolocation(); // geolocation.getCurrentPosition(function (r) { // let pi = 3.141592653589793 * 3000.0 / 180.0; // let x = r.longitude; // let y = r.latitude; // let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * pi); // let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * pi); // // self.center.lng = z * Math.cos(theta) + 0.0065; // self.center.lat = z * Math.sin(theta) + 0.006; // }, {enableHighAccuracy: true}) }, getClickInfo(e) { this.center.lng = e.point.lng; this.center.lat = e.point.lat; }, } } </script>

### **注意事项** ###

1.  页面地图控件必须指定高度
2.  浏览器定位有误差

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70]: /images/20230601/853d281617dc407dbfaedfc341184b40.png
[http_lbsyun.baidu.com_apiconsole_key]: http://lbsyun.baidu.com/apiconsole/key

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue利用百度地图初始化页面定位

Vue利用百度地图初始化页面定位结果展示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

朱雀/ 2023年06月05日 13:59/ 0 赞/ 272 阅读

相关 vue + 百度地图地址搜索并定位

1、先上效果图 ![在这里插入图片描述][20210525163315669.gif_pic_center] 2、实现方法： <el-input v-mo

Dear 丶/ 2022年10月15日 13:57/ 0 赞/ 441 阅读

相关百度地图调用及定位

文章目录百度地图调用及定位百度地图调用及定位通过以下链接登录百度账号： [https://lbsyun.baidu.com/index.ph

素颜马尾好姑娘i/ 2022年10月12日 00:43/ 0 赞/ 379 阅读

相关【百度地图】——利用三级联动加载百度地图

【百度地图】——利用三级联动加载百度地图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

àì夳堔傛蜴生んèń/ 2022年10月10日 04:55/ 0 赞/ 448 阅读

相关百度地图开发之定位

本文主要讲述利用百度地图API实现定位功能第一步:下载SDK与申请KEY 参考链接：[Android 百度地图 SDK v3.0.0 （一） - Hongyang

雨点打透心脏的1/2处/ 2022年07月29日 11:50/ 0 赞/ 360 阅读

相关百度地图定位详解

百度地图这几天一直闷在家里搞百度地图，但是搞来搞去，我的android studio IDE硬是搞不出地图，在过程中出现了一次默认的北京地图，不过然并卵；我总结

ゝ一纸荒年。/ 2022年07月16日 01:16/ 0 赞/ 356 阅读

相关百度地图定位

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <titl

╰半橙微兮°/ 2022年05月06日 04:27/ 0 赞/ 421 阅读

相关百度地图定位笔记

首先在[百度地图开发平台][Link 1]注册并且申请密钥一顿操作之后，生成一个访问应用（AK），这个就是密钥 <script type="text/javas

太过爱你忘了你带给我的痛/ 2022年04月25日 01:30/ 0 赞/ 425 阅读

相关 vue 百度地图调用

vue百度地图插件 [https://dafrok.github.io/vue-baidu-map/\/zh/search/local-search][https_dafro

￡神魔★判官ぃ/ 2022年04月23日 08:18/ 0 赞/ 332 阅读

相关 vue引入百度地图

1.创建一个vue项目输入指令 npm install vue-baidu-map –-save 2.在index.html 里面引入 <script type

雨点打透心脏的1/2处/ 2021年11月27日 07:14/ 0 赞/ 385 阅读