Vue-cli3/4中使用ECharts和BMap (亲测有效)

最新推荐文章于 2024-05-14 20:31:17 发布
最新推荐文章于 2024-05-14 20:31:17 发布
阅读量961 收藏 1
点赞数
分类专栏： template 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43962846/article/details/117352995
版权

首先 国内三大地图服务商 高德地图（AMap）腾讯地图(qqmap) 百度地图(BMap)

其中AMap 和 qqmap 使用的坐标系为 GCJ02 火星坐标系

BMap使用的坐标系为 BD09 百度坐标系，BD09是在GCJ02二次加密的基础上诞生的

下面进入正题

第一步

在public/index.html中引入bmap的script，注意在ak=后面填写自己申请的ak（百度地图开放平台）

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--引入百度地图-->
    <script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourKey" ></script>
    <!--引入百度热力图-->
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/3.0/src/Heatmap_min.js"></script> -->
    <title></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but navbar doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
<
最低0.47元/天 解锁文章
weixin_43962846
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts+bmap
coolsunxu的博客
06-30 887
echarts+bmap
vue实现百度echart地图省市县点击下钻效果
CodingNoob
03-28 2548
最新在做项目的时候用到一个地图，这个地图是要离线使用的，之前做过的百度地图用的都是在线版本的，但是如果不连接外网的时候就无法显示了，现在要做的是一个不接外网的东西，然后要在地图上对应的经纬度显示项目点。点击每个城市会显示对应的城市。于是研究了下echart的map地图，实现了下面的效果。 代码如下： <template> <div class="echart-bmap_wrapper"> <div class="btn"> <e
Vue3+百度地图的使用--实现地图的渲染、自动定位（点击控件定位）、地图搜索位置并定位、百度地图logo去掉、坐标图像标注（坐标跳动动画）和坐标点击弹窗，setup语法糖，element-plus
最新发布
weixin_43373009的博客
05-14 716
最近在赶新的项目，用了百度地图去开发，涉及地图的操作太多，目前就摸清标题所写的功能，趁今晚有空记录下来先，因为在开发的的过程找了许多帖子，因为我基于Vue3去开发的，发现很多都是基于vue2开发的，Vue3的比较少，改成Vue3时改的吃力或者修改后运行不了，所以折腾一了段时间。所以把目前完成的代码发出来，供大家参考，涉及后端的接口的数据，我也模拟了一些数据在上面了，可以开箱即用。
vue如何引入echart 地图，及报错总结
来了波，兄嘚
01-22 2581
官网 效果图 首先安装依赖 npm i echarts 引入 import echarts from "echarts"; //可视化 map.js export function loadBMap(ak) { return new Promise(function (resolve, reject) { if (typeof BMap !== 'undefined') { resolve(BMap) return true
echarts 中使用百度地图 bmap （基础使用：仅显示、定义样式）
热门推荐
qq_34695703的博客
08-11 1万+
1. 实现功能 实现简单的自定义样式百度地图，仅显示（基础，可自己研究扩展） 效果： 2. 代码步骤 第一步：创建基础结构，id=“map” 的 div做 echarts 容器 <!DOCTYPE html> <html> <head> <title>Echarts - 百度地图</title> <meta charset="utf-8"> <style type="text/css"> ...
前端笔记-echarts加载bmap地图
IT1995的博客
03-19 7738
程序运行截图如下： 这里首先要申请个百度地图密钥 使用下面的方式输入密钥，这里使用jsonp的方式 源码如下： <html> <head> <title></title> <script src="echarts.js"></script> <script src="bmap.js"...
vue-cli3/4 vue ui创建elementui项目
01-07
1、安装vue-cli3/4 MacBookPro:elementui zhangxm$ npm install -g @vue/cli npm WARN deprecated core-js@2.6.11: core-js@ /usr/local/lib/node_modules/@vue/cli/bin/vue.js > core-js@3.6.4 postinstall /usr/...
vue-cli3项目升级到vue-cli4 的方法总结
10-15
主要介绍了vue-cli3项目升级到vue-cli4 的方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
你可以在你的项目中使用vue-cli-service [command] 初始化配置 如果你的项目没有对应的文件，命令会生成vue.config.js 、 Views.json文件 多建 该命令将在上面生成配置的位置构建您的条目，您可
vue-cli3中配置alias和打包加hash值操作
10-14
主要介绍了vue-cli3中配置alias和打包加hash值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
我们有很多现有的vue-cli（3.x / 4.x）项目。 在生产中：基于webpack的vue-cli仍然是捆绑webapp的最佳实践（通过代码拆分，旧版浏览器的旧版构建）。 在开发中：即时启动服务器并通过闪电快速实现HMR很有趣。 ...
echart-bmap：vue + echart + bmap结合演示
02-12
echart-bmap 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。 echarts与bmap结合使用，同时使用了bmap的集群标记和echarts中的effectscatter在地图中进行标注。拖拽自动框选择放置当前地图中心点所在城市的边界
echarts整合百度地图所需js(china.js-world.js-bmap.js).rar
04-13
echarts整合百度地图所需要的js文件(china.js-world.js-bmap.js).rar
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
qq_38334677的博客
02-06 4116
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它旨在平易近人、灵活且可扩展，重点是声明式渲染和基于组件的架构。Vue 的反应性和可组合性使其成为开发复杂单页应用程序的热门选择。
Vue框架实现百度地图热力图（简单易懂，学了就会）
woyaojinyixian的博客
05-09 6491
实现百度地图热力图（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
bmap+echarts 百度地图绘制散点图
前端劝退工程师
03-11 4163
效果图 一，引入插件 <script type="text/javascript" src="echarts.min.js"></script> <script type="text/javascript" src="bmap.js"></script>/ <script type="text/javascript" src="http...
vue+echarts配合bmap做数据可视化页面，在触摸大屏幕上面不支持手势解决方案
web小袋鼠
01-02 1256
bmap在结合echarts做的时候，在触摸大屏幕上面不能够支持手势进行操作(例如双指放大缩小手势) 第一步：保存百度使用API返回的脚本，找到接口 http://api.map.baidu.com/getscript?v=版本号，命名为本地js文件； 第二步：在刚保存好的本地文件中要做一点修改，全局搜索 navigator 关键词将navigator 取代成​ myNavigator，然后重写 ...
echarts遇上百度地图打点案例（vue）
xiasohuai的博客
12-17 1198
效果图： 1.html文件引入百度api,ak是自己申请的密钥 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=xxxxxxxxxxxxxxxxxxxxx"></script> 2.vue代码： <div id="mapEchars" style="width: 100%;height:440px;background:#0b0519;">&l..
vue echarts bmap 获取可视范围坐标
u012914342的博客
06-07 649
因为大概要在地图上展示几百万个点，所以希望在拖拽加载或者缩放加载的时候，获取可视区域的经纬度范围内的数据，可以直接用： var bmap = graph.getModel().getComponent('bmap').getBMap() var start = bmap.getBounds().getSouthWest() //可视区域左下角 var end = bmap.getBounds().getNorthEast() //可视区域右上角 ...
vue-cli2和vue-cli3的区别
06-28
1.配置文件: vue-cli2使用的是`config/index.js`文件来配置项目,而vue-cli3使用的是`.env`和`.env.xxx`文件来配置项目. 2.构建工具: vue-cli2使用的是webpack1,而vue-cli3使用的是webpack4. 3.项目结构: vue-cli2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值