vue百度地图 + 定位的详解
作者：omyrobin2 发布时间：2024-06-07 15:20:37
标签：vue,百度地图,定位
vue 百度地图 + 定位
前提需要自己有百度的密钥，如没有可以去百度地图申请
一、在主目录下的index.html引入js，例如：
二、在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级，例如：
三、在项目中引入BMap：
四、代码：
<template>
<div class="home">
<div id="allmap" class="allmap"></div>
</div>
</template>
<script>
import {getStore, setStore, removeStore} from '@/config/Utils'
import BMap from 'BMap'
export default {
data () {
return {
type: 'tab',
address_detail: null,
center: {lng: 116.40387397, lat: 39.91488908}
}
},
mounted () {
this.ready()
},
methods: {
ready () {
let map = new BMap.Map('allmap')
let point = new BMap.Point(this.center.lng, this.center.lat)
map.centerAndZoom(point, 10)
map.enableScrollWheelZoom(true)
map.enableDoubleClickZoom(true)
var geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition((r) => {
if (r.point) {
this.center.lng = r.longitude
this.center.lat = r.latitude
let markers = new BMap.Marker(r.point)
map.addOverlay(markers)
map.panTo(r.point)
map.centerAndZoom(r.point, 16)
}
}, { enableHighAccuracy: true })
}
}
}
</script>
<style>
#allmap{
width: 100％;
height: 15rem;
}
</style>
五、效果：
如有错误地方，请留言指教，谢谢大家
以上所述是小编给大家介绍的vue百度地图 + 定位详解整合网站的支持！
来源：https://blog.csdn.net/gh1205/article/details/78929217
0
投稿猜你喜欢
以SQL Server 2012 为例上图是部分数据库的截图, 我们执行DENY VIEW any DATABASE to PUBLIC;然- torch.nn.Conv2d中自定义权重torch.nn.Conv2d函数调用后会自动初始化weight和bias，本文主要涉及如何自定义
- 对于比较长的数字组成的字符串，我们一般会用逗号（,）隔开来格式化数字，从右往左每三个数字用一个逗号分组隔开。为什么要用逗号隔开数字呢？因为当
- MYSQL中的分组和链接是在操作数据库和数据交互时最常用的两个在功能，把这两项处理好了，MYSQL的执行效率会非常高速。一、group by
- 目录楔子上传模块至pypi编写模块编译上传楔子我们在安装第三方包的时候，直接一个pip install xxx命令就搞定了，然后pip会去p
- inspect模块用于收集python对象的信息，可以获取类或函数的参数的信息，源码，解析堆栈，对对象进行类型检查等等，有几个好用的方法：D
- 前言最近空闲的时候看到了之前就关注的一个小站http://teahour.fm/,一直想把这里的音频都听一遍，可转眼间怎么着也有两年了，却什
- 本文实例为大家分享了python实现维吉尼亚加密法的具体代码，供大家参考，具体内容如下Vigenere加密/解密时,把英文字母映射为0-25
- 录一段音频，把它的音高改变50次并把每一个新的音频匹配到键盘的一个键位，你就能把电脑变成一架钢琴！一段音频可以被编码为一组数值的数组（或者列
- Ajax在网上已经叫喊了好几年了, 但是还是有很多像我这样的新手没掌握它, 像这样能改善交互体验的技术不会用真是很遗憾呢. 所以我就把我学到
- logger：日志器对象，可通过logging.getLogger()方法获取handler：处理器对象，将日志信息输出到指定位置，可通过l
- 与ADODB和MDB2相比，PDO更高效。目前而言，实现“数据库抽象层”任重而道远，使用PDO这样的“数据库访问抽象层”是一个不错的选择。
- 1、什么是版本控制系统版本控制是一种记录一个或若干个文件内容变化，以便将来查阅特定版本修订情况的系统。版本控制系统不仅可以应用于软件源代码的
- 删除一条留言信息会级联删除回复信息，这时我们需要用到事务，如下SQLALTER PROCEDURE [dbo].[proc_tb_leave
- 不喜欢Python的人经常会吐嘈Python运行太慢。但是，事实并非如此。尝试以下六个窍门，来为你的Python应用提速。窍门一：关键代码使
- 日志记录器(Logger)是日志处理的核心组件。log4j具有5种正常级别(Level)。1. static Level DEBUG :DE
- 刚刚上网搜了一下如何用python统计列表中不同元素的数量，发现很少，找了半天。我自己来写一种方法。代码如下list=[1,1,2,2,3]
- 先用使用常规方法，两个指针:golang实现：type Node struct { value int next *
- 效果图：代码如下：<!DOCTYPE html><html lang="en"><head
- 最近，需要对日志文件进行实时数据处理。一、简单的实时文件处理（单一文件）假设我们要实时读取的日志的路径为： /data/mongodb/sh
