在Vue-cli项目中Echarts和百度地图api结合使用

最新推荐文章于 2024-08-11 18:57:37 发布
最新推荐文章于 2024-08-11 18:57:37 发布
阅读量1.4k 收藏 4
点赞数 1
分类专栏： 前端技术积累 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42991509/article/details/103046818
版权

项目需求：根据后台的包含经纬度的数据，在百度地图上点出位置，显示分布图。
先看最后的效果图：
在这里插入图片描述
1、npm安装Echarts，过程略。

2、 在百度地图平台申请ack码，必须有才能在后面的步骤中引入全部的地图数据

3、在index.html主页面引入百度地图

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>XXX系统</title>
   <!--引入百度地图-->
   <script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请的ak码" ></script>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

4、在webpack.base.conf.js中配置

。。。。。
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? './' + config.build.assetsPublicPath
      : './' + config.dev.assetsPublicPath
  },
  // 新增关于地图的配置
  externals: {
    'BMap': 'BMap'
  },
  。。。

5、在页面中按需引入并使用：

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import 'echarts/extension/bmap/bmap' // 引入百度地图插件
// import BMap from 'echarts/extension/bmap/bmap'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    }
  },
  data() {
    return {
      chart: null,
      dataPoint: [{
        name: '齐齐哈尔',
        log: 123.97,
        lat: 47.33,
        remark: '2'
      },
      {
        name: '赤峰',
        log: 118.87,
        lat: 42.28,
        remark: '5'
      },
      {
        name: '成都',
        log: 104.06,
        lat: 30.67,
        remark: '3'
      }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    async initChart() {
      try {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: (params) => {
              return '设备数' + params.value[2]
            }
          },
          bmap: {
            center: [116.3964, 39.9093],
            zoom: 2,
            roam: true,
            mapStyle: {
              styleJson: [
                {
                  'featureType': 'water',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#044161'
                  }
                },
                {
                  'featureType': 'land',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#004981'
                  }
                },
                {
                  'featureType': 'boundary',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#064f85'
                  }
                },
                {
                  'featureType': 'railway',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'highway',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#004981'
                  }
                },
                {
                  'featureType': 'highway',
                  'elementType': 'geometry.fill',
                  'stylers': {
                    'color': '#005b96',
                    'lightness': 1
                  }
                },
                {
                  'featureType': 'highway',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'arterial',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#004981'
                  }
                },
                {
                  'featureType': 'arterial',
                  'elementType': 'geometry.fill',
                  'stylers': {
                    'color': '#00508b'
                  }
                },
                {
                  'featureType': 'poi',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'green',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#056197',
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'subway',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'manmade',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'local',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'arterial',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'boundary',
                  'elementType': 'geometry.fill',
                  'stylers': {
                    'color': '#029fd4'
                  }
                },
                {
                  'featureType': 'building',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#1a5787'
                  }
                },
                {
                  'featureType': 'label',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                }
              ]
            }
          },
          series: [
            // 点数据
            {
              name: '设备数',
              type: 'scatter', // 类型，表示点数据
              coordinateSystem: 'bmap',
              data: this.convertPointData(this.dataPoint), // 数据源
              symbolSize: 8, // 标记点大小
              // 标记样式：可使用svg图标
              symbol: 'path://M512 64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m128 331.2c-4.8 62.4-54.4 112-116.8 116.8-75.2 6.4-138.4-53.6-138.4-127.2 0-70.4 57.6-128 128-128 73.6 0 133.6 63.2 127.2 138.4z',
              // 角度信息
              symbolRotate: 0,
              // 鼠标选中说明
              label: {
                normal: {
                  formatter: '{b}', // tooltip显示，自定义参考上方例子
                  position: 'left', // 对齐
                  show: false // 是否一直显示
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#F06C00' // 颜色信息
                }
              }
            }
          ]
        })
        // const bmap = this.chart.getModel().getComponent('bmap').getBMap()
        // bmap.addControl(new BMap.MapTypeControl())
      } catch (err) {
        console.log(err)
      }
    },
    convertPointData(data) {
      var res = []
      for (const item in data) {
        res.push({
          name: data[item].name,
          value: [data[item].log, data[item].lat, data[item].remark]

        })
      }
      return res
    }
  }
}
</script>

我注释掉了// const bmap = this.chart.getModel().getComponent('bmap').getBMap() // bmap.addControl(new BMap.MapTypeControl()) 这段百度地图的操作设置。

拓展一下，对应的散点图、热力图，都可以操作了。

参考：https://www.jianshu.com/p/deaf251f7e57

一键写代码
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue Echart热力图 百度地图
Angular_的博客
05-15 4094
搬运某位兄台博客的：https://blog.csdn.net/yc_1993/article/details/52432005 页面先引入：<script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script> <template&gt...
vue项目中 使用到的 echarts 地图 结合 百度地图 使用
LWD_XST的博客
06-21 1018
好久没写了，今天难得勤快一会，写一个前阵子项目中使用到的小技术点 @_@ 事故的起因是，客户觉得项目样式太土，想增加一些炫酷效果，然后领导发话要在页面中增加一些统计图、地图啥的，然后就轮到 Echarts 登场了，各种统计图例应有尽有。。。可是我没用过echarts的地图啊，然后当然是各种百度。经过了一宿的研究，发现其实看似复杂的一皮，实际大佬已经都给封好了，你只需要copy就可以了，话不多说，简单说一下我的vue项目中如何最后成功让 Echarts 地图显示在我的页面中的。 既然要用到 Echarts
echarts+bmap结合可以在百度地图上展现 点图，线图，热力图 等可视化。
03-23
使用以百度地图为底图的形式,结合echarts，在地图上显示echarts的scatter、effectScatter、custom元素
Vue+Node+高德地图+Echart做一款出行可视化全栈webapp
weixin_34381687的博客
06-08 523
咔咔出行（出行可视化） 项目简介 解决出行问题，用于出行行程记录，路线规划，数据可视化分析的移动端webapp 点击这里查看该项目 项目截图 私人出行 公共交通 历史列表 我的信息 技术栈 前端：移动端，vue全家桶，Mand组件库，Echarts.js，Scss 后端：Node，Express框架，高德地图API 数据库：Mysql 功能模块 个人出行 用户个人出行...
Vue.js 搭建大屏可视化系统 - 最全指南
最新发布
qq_42072014的博客
08-11 1480
通过本文，你已经掌握了如何使用 Vue.js 和相关技术栈构建一个基本的大屏可视化系统。当然，实际项目中可能还会遇到更多复杂的需求和技术挑战，但本文提供的基础架构足以作为一个良好的起点。
vue echart配合百度地图
冰码达的博客
05-23 636
heatmap报错Cannot read property ‘type’ of null
vue-cli项目中使用echarts图表实例
10-17
本篇文章将详细阐述如何在使用vue-cli创建的Vue项目中集成和使用ECharts来创建各种图表。 首先，需要了解ECharts的基本概念。ECharts是百度开源的一个数据可视化库，它可以让用户通过简单的API配置来创建美观且功能...
vue-cli3中配置alias和打包加hash值操作
10-14
在 Vue CLI 3 的示例中，对于图片、音频、视频和字体文件的配置，我们使用了 `hash` 来确保当这些静态资源改变时，它们的 URL 也会随之更新： ```javascript { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: '...
Vue(vue-cli)组件中使用echarts图表框架
Web_Student的博客
07-09 1835
文章目录官方文档（配置项）官方文档（教程）官方文档（API）1.在项目中安装依赖2.全局引入echarts，在mian.js中：3.写代码，在xxx.vue中1.在template标签中放两个有宽高的div来装图标2.script标签中methods中写画图表的方法3.在mounted生命周期函数中实例化echarts对象，确保dom元素已经挂载到页面中4.结果5.其他方法6.使用vue-echarts 官方文档（配置项） 官方文档（教程） 官方文档（API） 1.在项目中安装依赖 npm安装 npm
vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
weixin_45766506的博客
05-06 3352
1、初始化echarts以及例子可以看管网的 地址：https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题： 1、按照官方的例子写下来的，但是地图就是出不来 2、除了官方例子中的元素外，还需要给百度地图添加中心点、定位等等，但是不知道怎么获取百度地图实例 3、获取到百度地图实例后设置百度地图的元素不生效 （1）、引入百度地图AK 在项目的文件夹中（看具体项目在哪里新建都行）新建一个js文件，文件内容如下： //百
在vue2中用vue-echarts和v-charts绘制百度地图定制散点图
jieyucx的博客
04-18 996
import ‘echarts/extension/bmap/bmap’ // 在echarts中使用百度地图。v=2.0&ak=你的百度地图秘钥”
用Echarts请求百度地图api 小案例
weixin_33869377的博客
01-28 795
最终效果：1.接收用户输入地点2.点击查询3.中国地图出现4.用户输入的地点用圆点标记出来5.并且右上角可以下载成图片结构：一层结构：my-demo文件夹二层结构：map文件夹、bootstrap.css、china.js、echarts.min.js、jquery.min.jsmap.html所有代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &l...
Vue框架实现百度地图热力图（简单易懂，学了就会）
woyaojinyixian的博客
05-09 6545
实现百度地图热力图（Vue框架） 最近比赛项目有一个需求是实现前端的展示，展示热力图，费了一些功夫才弄好，记录一下实现的过程。如果想调用百度地图API，首先你需要得在官网注册一个帐号然后申请一个密钥，注册网：http://lbsyun.baidu.com/index.php?title=lbscloud 直接上代码，需要在项目中的index.html中添加如下代码 <script src="http://api.map.baidu.com/api?v=2.0&ak=密匙"></sc
Vue+Echarts 绘制极坐标柱状图
VVVVV
03-07 968
Vue+Echarts 绘制极坐标柱状图，内含关键属性注释
Vue + Echarts + 高德地图 实现点击下探图表
明天也要努力的博客
09-13 4103
效果图： 1. 高德地图 Key 申请 参考文章传送门 2. 引入使用AMapJS AMapJS 是 AMap高德地图API加载器。 帮助开发者快速加载高德地图相关API，在模块化应用、异步编程中使用API更加灵活便捷。 安装： npm i amap-js -S 完整引入： import AMapJS from 'amap-js'; 本文仅使用AMapUILoader 3. Vue 中实现效果图完整代码 <template> <div class="app-container"
百度地图+Echarts+Vue3
m0_73216899的博客
01-05 208
【代码】百度地图+Echarts+Vue3。
vue中echarts地图
weixin_44634366的博客
07-03 752
import import echarts from "echarts"; import elementResizeDetector from "element-resize-detector" //窗口变化时，刷新图表，保持大小可观 template <template> <div ref="chart" :style="{width:'100%',height:height+'px'}" ></div> </template>
vue3 使用echarts和百度地图
weixin_43130350的博客
12-01 4945
vue3.0 使用echarts和百度地图进行地图展示，自定义标注和自定义信息窗口，infoBox,infoWindow
vue和echarts实现地图航线
zebghfv的博客
11-01 2638
vue和echarts实现地图航线 效果图： 第一步：echarts的安装。 npm install echarts --save 第二步：在vue项目中的main.js中进行导入echarts，放在其原型上方便利用。 main.js代码： import Vue from 'vue' import App from './App.vue' const echarts = require("echarts") Vue.config.productionTip = false Vue.prototype.$
vue-cli+echarts怎么获取动态数据
05-13
axios.get('/api/data').then(res => { // 更新图表数据 this.chartData = res.data }) }, 5000) // 每5秒钟获取一次数据 ``` 2. 使用WebSocket实时获取数据 可以使用WebSocket与后端建立连接，实时接收数据。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值