vue调用百度地图

啥名字都有了

已于 2024-01-08 10:37:59 修改

阅读量1.6k

点赞数

分类专栏：前台 vue 地图文章标签： vue调用百度地图 ESLint: &#039;BMap&#039; is not defined. (no-

于 2019-08-08 16:06:06 首次发布

本文链接：https://blog.csdn.net/ybp500234/article/details/98874511

版权

vue 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

地图

3 篇文章 0 订阅

订阅专栏

前台

2 篇文章 0 订阅

订阅专栏

vue调用百度地图

申请百度地图ak
调用地图
- 引入地图脚本
- 使用地图

申请百度地图ak

首先你得有一个百度账号,如果没有的自己先注册一个,这里就不多说;
如果没有ak，你在应用中调用地图就会出现未授权提示，无法使用地图应用
在这里插入图片描述
然后就是申请ak
一、先登录百度地图开放平台，然后在首页右上角找到控制台

二、进入控制台后在控制台看板点击创建应用，然后根据自己的需求填写，完成后提交就可以在查看应用中看到生成的ak

调用地图

引入地图脚本

在自己在vue项目的index.html文件的head中添加
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script>

// An highlighted block
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script>
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

使用地图

这里我不多说,直接上代码

<template>
  <div id="allmap" class="allmap" />
</template>

<script>
export default {
  data() {
    return {
      map: undefined
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      // 百度地图API功能
      // 创建Map实例
      var map = new BMap.Map('allmap', { enableMapClick: false })
      this.map = map
      // 初始化地图,设置中心点坐标和地图级别
      map.centerAndZoom(new BMap.Point(106.55, 29.57), 13)
      // 允许滚轮缩放
      map.enableScrollWheelZoom(true)
      // 禁止拖拽
      // map.disableDragging()
      // 允许拖拽
      // map.enableDragging()
      // 获取可视区域
      var bs = map.getBounds()
      // 可视区域左下角
      var bssw = bs.getSouthWest()
      // 可视区域右上角
      var bsne = bs.getNorthEast()
      console.log('当前地图可视范围是：' + bssw.lng + ',' + bssw.lat + '到' + bsne.lng + ',' + bsne.lat)
      // 添加平移和缩放按钮
      map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }))
      // 添加地图类型(2D图，混合图)
      var mapType1 = new BMap.MapTypeControl(
        {
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
          anchor: BMAP_ANCHOR_TOP_LEFT
        }
      )
      map.addControl(mapType1)
      // 添加定位控件
      var geolocationControl = new BMap.GeolocationControl()
      geolocationControl.addEventListener('locationSuccess', function(e) {
        console.log(e)
        // 定位成功事件
        var address = ''
        address += e.addressComponent.province
        address += e.addressComponent.city
        address += e.addressComponent.district
        address += e.addressComponent.street
        address += e.addressComponent.streetNumber
        console.log('当前定位地址为：' + address)
      })
      geolocationControl.addEventListener('locationError', function(e) {
        // 定位失败事件
        console.log(e.message)
      })
      map.addControl(geolocationControl)
      // 缩放事件(缩放完成后触发) 对应的有 zoomstart 拖拽前触发
      map.addEventListener('zoom', function() {
        console.log(map.getBounds())
        console.log(map.getBounds().getSouthWest())
      })
      // 拖拽事件(拖拽完成后触发) 对应的有 dragstart 拖拽前触发 dragging 拖拽中触发
      map.addEventListener('dragend', function() {
        console.log(map.getBounds())
        console.log(map.getBounds().getSouthWest())
      })
    },
    zoomend() {
    }
  }
}
</script>

<style scoped>
  html,body,.allmap{
    width: 100%;
    height: calc(88vh);
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
  }
</style>

提示: 如果代码里面有报错ESLint:'xxx' is not defined.(no-undef),有两种解决方式,个人推荐使用第二种方式 ,因为可以集中管理
注:这里只针对当前百度地图,若其它报类似错误,应视情况处理
在这里插入图片描述
一、在报错代码的上面一行添加/* global BMAP_NAVIGATION_CONTROL_SMALL */

/* global BMAP_NAVIGATION_CONTROL_SMALL */
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }))

二、在项目根目录下面的.eslintrc.js文件的module.exports中配置,具体如下

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },

  globals: {
    BMap: true,
    BMAP_NAVIGATION_CONTROL_SMALL: true,
    BMAP_ANCHOR_TOP_RIGHT: true,
    BMAP_NORMAL_MAP: true,
    BMAP_HYBRID_MAP: true,
    BMAP_ANCHOR_TOP_LEFT: true,
    BMAP_NAVIGATION_CONTROL_LARGE: true,
    BMAP_ANIMATION_BOUNCE: true,
    ...
  },
  ...
 }

我重新写了一篇关于VUE中使用地图的文章
vue使用百度地图

啥名字都有了

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
vue调用百度地图

vue调用百度地图申请百度地图ak调用地图引入地图脚本使用地图申请百度地图ak首先你得有一个百度账号,如果没有的自己先注册一个,这里就不多说;下面就是申请ak一、先登录百度地图开放平台，然后在首页右上角找到控制台二、进入控制台后在控制台看板点击创建应用，然后根据自己的需求填写，完成后提交就可以在查看应用中看到生成的ak另：如果没有ak，你在应用中调用地图就会出现未授权提示，无法使用...
复制链接

扫一扫

专栏目录