vue-element-admin使用百度地图

mapv.min.js(位置数据可视化用到的js文件) (百度地图)位置数据可视化用到的js文件(普通点图、点聚合图等等) https://mapv.baidu.com/gl/examples/static/common.js https://mapv.baidu.com/build/mapv.min.js https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.55/dist/mapvgl.min.js 立即下载

获取百度地图的Key

  1. 进入百度地图开放平台
  2. 进入控制台,并进行应用的创建
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

设置Public

获得百度地图的key之后,打开vue-element-admin中的Public的index.html源文件,并在其中添加以四行。其中,ak后面的xxxxxxxxx指的是你的百度地图的key

<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=xxxxxxxxx"></script>
<script src="./mapv.min.js"></script>
<script src="./common.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.119/dist/mapvgl.min.js"></script>

在这里插入图片描述

将mapv.min.js和common.js放入Public文件夹

mapv.min.js文件下载地址
common.js文件下载地址
在这里插入图片描述

测试调用

下面给出一个完整的vue页面,该页面能够显示百度地图,并可以通过用户点击来给地图添加上小红点。

<template>
  <div class="app-container">
    <div class="map-container" :id="mapId"></div>
  </div>
</template>

<script>

// 设置语言
import lang from "element-ui/lib/locale/lang/zh-CN";
import locale from "element-ui/lib/locale";
locale.use(lang);

export default {
  name: "TestMap",
  components: {  },
  directives: {  },
  filters: {
  },
  data() {
    return {
      mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
    };
  },
  created() {
    
  },
  mounted() {
    this.baiduMap()
  },
  methods: {
    baiduMap() {
            // var map = initMap(this.mapId)
            var map = new BMapGL.Map(this.mapId)
            var point = new BMapGL.Point(109.29094,22.4165,);
            // zoom值越大表示距离地面越近
            let old_zoom = 16.0;
            map.centerAndZoom(point, old_zoom);
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放1
            // map.setTilt(45);
            //map.setDisplayOptions({
            //    poiText: false
            //})
            map.setDisplayOptions({
                poiIcon: false
            })
            // 用户点击
            map.addEventListener('click', (e) => {
               var marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat));
                console.log(e.latlng.lng, e.latlng.lat)
                // 在地图上添加点标记
                map.addOverlay(marker);
                this.form.coorT = '经度:'+e.latlng.lng+',纬度:'+e.latlng.lat
                this.form.coorD.lng = e.latlng.lng
                this.form.coorD.lat = e.latlng.lat
            })
        }
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  min-height: calc(100vh - 0px);
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 0px;
}

</style>

请添加图片描述

mapv.min.js Mapv 是一款基于百度地图的大数据可视化开源库,可以用来展示大量的点、线、面的数据,每种数据也有不同的展示类型,如直接打点、热力图、网格、聚合等方式展示数据 立即下载

相关推荐

mapvgl.min.js(位置数据可视化用到的js文件)

(百度地图)位置数据可视化用到的js文件(普通点图、点聚合图等等) https://mapv.baidu.com/gl/examples/static/common.js https://mapv.baidu.com/build/mapv.min.js https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.55/dist/mapvgl.min.js

vue-element-admin使用地图

在高德地图申请key时,pc端需要申请的是web(js),不是web,不然会报错 我使用的是vue-amap,需要的可 import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key:'在高德地图申请的key', plugin: [ "AMap.Autocomplete", //输入提示插件 "AMap.PlaceSearch", //POI搜索插件 "AMap.Sca

lixu102593的博客 1316

mapv.min.js源文件

mapv.min.js源文件

在Vue3项目中使用百度地图

vue3-element-plus-admin 可广泛应用于各种后台管理系统,如电商平台、CRM(客户关系管理)、CMS(内容管理系统)等。对于需要快速搭建后台界面或原型的团队,这是一个理想的起点。注册地址:http://lbsyun.biadu.com/apiconsole/key。如果您的vue项目中要使用地图服务,推荐 vue-baidu-map 这个插件。第一步,注册百度地图开发者账号,获得 ak 秘钥。接下来,教大家如何使用。

zihan0321的博客 1263

保姆级教程:从 TLE 数据源获取到 Cesium 卫星轨迹可视化全流程(含常见报错排查)

本文提供从TLE数据源获取到Cesium卫星轨迹可视化的全流程保姆级教程,涵盖数据预处理、satellite.js计算、Cesium集成及性能优化等关键步骤,并针对常见报错提供详细排查方案,帮助开发者高效实现卫星轨迹可视化。

weixin_29002595的博客 295

PWM与光耦的完美联姻:低成本4-20mA转换方案揭秘

本文揭秘了PWM与光耦结合的低成本4-20mA转换方案,适用于工业自动化领域。通过PWM信号控制输出电流,光耦实现电气隔离,该方案成本低廉、电路简单且隔离可靠。文章详细介绍了两种经典电路实现方案,包括四光耦线性模式方案和PWM控制LM317方案,并提供了实战技巧与优化策略,帮助中小企业和电子DIY爱好者构建经济高效的4-20mA转换系统。

weixin_29229055的博客 536

百度地图开发

vue-element-admin以及vue整合后的百度地图api结合实现地图开发登录解析。

星是河的眼的博客 1168

二次开发vba_CATIA VBA(VBS)二次开发:使用Search批量选择元素

在CATIA二次开发中很多在程序中进行自动交互的方法或函数都需要使用选择集作为参数,将几何元素按照要求批量添加到选择集中也是实现程序自动运行的有效方法。在前面的文章《CATIA使用VBA(VBS)二次开发时用户的交互选择》和《CATIA使用VBA(VBS)二次开发时工程图和草图位置的交互选择函数Indicate2D》中介绍了在CATIA VBA(VBS)二次开发中用户和选择集之间的交互操...

weixin_32497403的博客 1321

vue-element-admin框架项目

vue-element-admin框架项目

u014084915的博客 457

华硕主板UEFI模式下安装Ubuntu与Windows双系统全攻略

本文详细讲解了在华硕主板UEFI模式下安装Ubuntu与Windows双系统的完整流程。从安装前的BIOS关键设置(如处理安全启动与CSM)、使用GPT分区表,到在Windows中安全分配空间、手动创建Ubuntu分区,最后完成引导配置,提供了避免常见错误的实用技巧,确保双系统稳定共存。

weixin_29199873的博客 345

AndroidKiller之APK 编译失败,无法继续下一步签名【BUG解决】【App反向解析】

文章目录项目场景:问题描述原因分析:解决方案:BUG解决 项目场景: AndroidKiller: 在反向解析APP包时报错:APK 编译失败,无法继续下一步签名。 网上很多方法都是无效的哈,我追究原因发现,这个bug的出现大部分情况都是因为Apktool的问题。 此方法:百分之百解决此bug! 错误如下: 问题描述 APK 编译失败,无法继续下一步签名! 原因分析: Apktool版本不适配的问题,现在的技术更新换代太快,我们安装AndroidKiller的时候,有时候不是官方渠道的话,他的版本是非常

一键难忘的博客 2万+

vue+element中引入百度地图

我们的后台管理系统中,经常会有地图预览,本篇文章带你如何在vue中引入和成功使用高德地图!喜欢麻烦动动您发财的小手,一键三连!

前端-尔嵘 1万+

OData V2 消息在 SAP UI5 中的生成、传播与治理全解

SAP UI5 的 OData V2 消息机制通过自动解析服务端响应头(sap-message)或错误体,将消息推送到全局 MessageModel,实现数据质量保障。关键点包括:1)消息通过目标路径与控件绑定联动,触发高亮等反馈;2)生命周期管理需注意避免自动刷新导致消息丢失;3)常见陷阱如批处理错误重复、内外层消息冲突等可通过精准目标路径或自定义处理器解决。代码示例展示了如何配置模型、消息模型及 MessagePopover 实现端到端消息展示,同时支持控件通过 refreshDataState 自定义

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 231

vue-admin-element 整合百度地图实现地图标记

vue-admin-element 整合百度的地图实现地图标记 因为项目的需求,老板要求我们在首页做一个联系我们的界面,里面包含地图信息和联系人的基本信息。且这边的地图不是一张图片。上博客看各位博主的各种方法但是就是还原不出来!或许是我太菜了吧,没办法只能硬着头皮看开发手册!!! 1、效果图 先看一下我做出来的效果图,如果正合您的胃口那么请您悉心看完,你也可以做出一样的来!!!! 2、首先申请一个百度地图的ak(密钥) ...

聪明不喝牛奶的博客 1321

手把手入门YOLO到改进优化教程 | 【P6进阶篇】YOLOv8模型剪枝优化实战-LAMP剪枝

本节首先介绍LAMP剪枝相关理论。然后结合YOLO框架,手把手搭建剪枝工程,包括配置文件修改、剪枝脚本构建等内容。

嵌入式阿齐Archie 2万+

智能车图像处理22-进阶篇14--小s的判断

这篇文章中主要讲述智能车图像处理中 : 小s的判断方法。

taiyuezyh的博客 2568

vue-element-admin简单教程(页面权限控制,插件安装,环境变量)

布局图片 1. 侧导航 侧边栏和路由是绑定在一起的 **配置项:** hidden: true // (默认 false)当设置 true 的时候该路由不会再侧边栏出现 如401,login等页面 redirect: 'noRedirect' //当noRedirect 的时候该路由在面包屑导航中不可被点击 alwaysShow: true //一直显示根路由 name...

老梅的博客 1万+

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

【黄啊码】关于vue的PC端和手机端框架

1. Element Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element 2. vue-element-admin vue-element-admin是基于 Vue2.0,配合使用 Element UI 组件库的一个前端管理后台集成解决方案。它使用了最新的前端技术栈,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。 vue-element-admin 3. vue-admin-be..

黄啊码 3381

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Vue仅记录

绘图地址:https://echarts.apache.org/examples/zh/editor.html?项目地址:(国际化)https://github.com/PanJiaChen/vue-element-admin/tree/i18n。项目介绍:https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/项目运行地址:https://panjiachen.github.io/vue-element-admin/#/login。

我就是我是好孩子的博客 462

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端(web端)、数据可视化组件库(数据大屏) 、动画组件库、富文本、Markdown,3D组件库,Markdown,AI组件库

Vue组件库,超100个Vue组件库,Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端(web端)、数据可视化组件库(数据大屏) 、动画组件库、文本编辑器,富文本Markdown,3D组件库】

程序员猫爪 3万+

Vue 插件汇总

UI组件 框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- 三端样式一致的响应式 UI 库 vuetif...

A_Lonely_Smile的博客 290

2018年最值得关注的30个Vue开源项目

NO.1 Element:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 [Github star:22004]。 NO.2 iView:一套高质量的UI组件库 [Github star:12175]。 NO.3 Best-resume-ever:用Vue和LESS简单、快速建立许多漂亮的简历,并创建你最好的简历。[Github star:8839]。 NO....

MySunshine07的博客 502

Vue后台管理系统一站式实战指南:从零搭建企业级管理后台

还在为开发后台管理系统而烦恼吗?每次都要从零开始搭建权限控制、页面布局、数据表格?Vue-Admin-SPA正是为你量身定制的解决方案——这是一个基于Vue 2.0生态的完整后台管理系统模板,集成了企业级开发所需的核心功能,让你能专注于业务逻辑而非重复造轮子。 ## 为什么选择Vue-Admin-SPA? 现代企业后台管理系统开发面临诸多挑战:复杂的权限体系、响应式布局适配、数据可视化展示、多

gitblog_00484的博客 324

【收藏】2019年最新Vue相关精品开源项目库汇总

前言 本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日,很多内容早已过期或是很多近期优秀组件未被收录,所以小肆今天(2019/01/19)重新更新了内容并新建项目awesome-vue。 针对原项目小肆做了如下几点更新 更新全部项目github上的star数 根据最...

weixin_33738578的博客 166

Element-ui

简介 是一套基于 vue 2.0 的桌面端组件库 https://element.eleme.cn/#/zh-CN 使用方法 1.基于命令行方式手动安装 (1)安装依赖包 (2)导入Element-UI相关资源 //1.安装依赖包 npm i element-ui -S //2.导入Element-UI相关资源 //导入组件库 import ElementUI from 'element-ui' //导入组件相关样式 import 'element-ui/lib/theme-chalk/index.css

LFLZBZM的博客 347
上一篇: 2020年道路损害检测挑战冠军代码windows测试
下一篇: Windows+Python使用PyQt5----安装、简单样例(一)
时闻折竹
博客等级 码龄11年 64粉丝 79原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值