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

朱雀 2023-06-05 13:59 268阅读 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 条评论，268人围观）

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

相关阅读

相关 Vue Baidu Map百度地图定位当前位置

<template> <div> <baidu-map class="map" @ready="handler" style="height: 500px;" :c

小咪咪/ 2023年10月11日 14:29/ 0 赞/ 41 阅读

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

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

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

相关百度地图 vue-map 根据状态定位多个

<!-- @Author: zhang_gen_yuan @Date: 2020-12-23 17:35:15 @LastEditT

小灰灰/ 2022年12月30日 14:57/ 0 赞/ 100 阅读

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

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

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

相关百度地图调用及定位

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

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

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

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

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

相关百度地图开发之定位

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

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

相关百度地图定位详解

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

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

相关百度地图定位

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

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

相关百度地图定位笔记

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

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