vue百度地图 + 定位的详解


Posted in Javascript onMay 13, 2019

vue 百度地图 + 定位

 前提需要自己有百度的密钥,如没有可以去百度地图申请

一、在主目录下的index.html引入js,例如:

vue百度地图 + 定位的详解 
vue百度地图 + 定位的详解

二、在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级,例如:

vue百度地图 + 定位的详解

三、在项目中引入BMap:

vue百度地图 + 定位的详解

四、代码:

<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百度地图 + 定位的详解

五、效果:

vue百度地图 + 定位的详解

如有错误地方,请留言指教,谢谢大家

以上所述是小编给大家介绍的vue百度地图 + 定位详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript背投广告代码的完善
Apr 08 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
Seajs源码详解分析
Apr 02 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 #Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 #Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 #Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 #Javascript
详解async/await 异步应用的常用场景
May 13 #Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 #Javascript
JavaScript Math对象和调试程序的方法分析
May 13 #Javascript
You might like
php基础知识:类与对象(5) static
2006/12/13 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
java script编程起步(第三课)
2007/01/10 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
微信小程序checkbox组件使用详解
2018/01/31 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
利用Psyco提升Python运行速度
2014/12/24 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
Python列表推导式实现代码实例
2020/09/09 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
大学生期末自我鉴定
2014/02/01 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS