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

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

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

相关阅读

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

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

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

相关百度地图自动定位

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding

r囧r小猫/ 2023年07月07日 05:42/ 0 赞/ 5 阅读

相关 vue使用百度地图定位当前城市

申请百度地图浏览器端ak 百度地图开发者平台，创建应用后，会生成免费ak。 vue项目中配置ak 在index.html中添加如下代码： <script

小鱼儿/ 2023年07月04日 06:12/ 0 赞/ 17 阅读

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

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

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

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

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

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

相关百度地图调用及定位

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

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

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

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

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

相关百度地图定位详解

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

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

相关百度地图定位

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

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

相关百度地图定位笔记

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

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