vue + 高德地图 + 图例
其他:
vue + 高德地图 + 普通标记点
vue + 高德地图 + 标记点(变大变小闪烁动画、多标记点、同一位置标记点显示个数)
效果图:
npm install vue-amap --save
在main.js中:
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({key: '你的key值',plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],// 默认高德 sdk 版本为 1.4.4v: '1.4.4'
})
index.html 的中引入
<script src="//webapi.amap.com/maps?v=1.4.15&key=你的key值&&plugin=AMap.MarkerClusterer,AMap.Autocomplete,AMap.MapType,AMap.PolyEditor,AMap.MouseTool,AMap.AdvancedInfoWindow,AMap.Scale,AMap.ToolBar,AMap.RangingTool"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.4.11"></script>
使用:
<template><div><!-- 地图 --><div id="map" style="position:relative;margin:0 15px;height:700px"><!-- 图例 --><div style="position:absolute;top:5px;left:5px;z-index:2000;background-color:#333;padding-right:10px"><p class="mapLegend" style="background-color:#F56C6C"/><span style="color:#F56C6C">告警设备</span><p class="mapLegend" style="background-color:#F0BD14"/><span style="color:#F0BD14">离线设备</span><p class="mapLegend" style="background-color:#1AFF00"/><span style="color:#1AFF00">正常设备</span></div></div></div>
</template><script>
import AMap from 'AMap'export default {name: 'Home',data () {return {}},mounted () {this.initMap()},methods: {// 绘制地图initMap () {// 地图this.map = new AMap.Map('map', {resizeEnable: true,center: [120, 35], // 经纬度zoom: 12 // 远近})}}
}
</script>
<style scoped>
.mapLegend{margin:8px 0 8px 10px;display:inline-block;vertical-align:middle;height:12px;width:12px;border-radius:6px
}
</style>
vue + 高德地图 + 图例相关推荐
- 利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹 高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示 先完成准备工 ...
- vue+高德地图绘制路径
一.vue+高德地图开发 最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
- vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点 具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
- vue + 高德地图 + wind-layer实现风场
vue + 高德地图 + wind-layer实现风场 效果图: 第一步:引入 wind-layer插件 或者 npm install ol-wind npm install amap-wind ht ...
- vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店 由 学院君 创建于2年前, 最后更新于 2年前 版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
- Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局 绘制页面 <div class="Clock"><!-- ...
- Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...
- Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能
场景 通过给车辆的驾驶员的手机安装app,管理员在后台可以实时查看车辆的实时位置. 实现思路: app中集成高德地图,app启动登录后,定时地获取当前定位信息连同当前账号上传到服务器后台. 后台将获取 ...
- vue 高德地图搜索功能_VUE中使用高德地图做轨迹添加功能,帮助轨迹展示
准备工作 使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save import AMap from 'vu ...
- vue[高德地图行车路径规划以及路线记录绘制操作]
最近的一个项目中需要根据需求将地图上画出一条高速公路,然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容. 看遍了不少高德地图的api内容以及搜索了不少的网上资源,发现可以通过路径规划 ...
最新文章
- 10、mybatis参数处理
- matlab中的scramble函数,matlab 中 hold on 和hold off的使用
- 1.1 Windows 程序运行原理(消息循环和响应)
- redis 值字符串前面部分乱码_StringBoot 整合Redis解决存储乱码(通过StringRedisSerializer来进行序列化)...
- React div加载背景图
- 吗 支持windows_M1能否原生支持Windows 苹果把问题抛给了微软
- KubeCon 2018 参会记录 —— FluentBit Deep Dive 1
- django的render的特殊用法
- (二)zookeeper安装
- 用户故事讲解(看最后的例子,你应该就知道怎么样写用户故事了)
- 抓取systrace
- 服务器API压力测试 -ab工具
- viewport手机逻辑像素与物理像素原理(附完整手机各版本尺寸)
- 第一章 网络入门【仅参考】
- VScode+esp-idf:编译腾讯物联网控制台ESP32例程(esp-qcloud)
- [转]Apache Ignite——新一代数据库缓存系统
- 原来姹紫嫣红开遍 -- 牡丹亭·游园惊梦
- 小米手机第三方卡刷软件_小米手机通用详细图形刷机教程(四): 刷入第三方系统...
- java中jlaber用法_laber的for属性
- 有道词典Android客户端包体积优化之路
热门文章
- Python笔记(21)正则表达式
- 动漫测试题软件,Flash动画考试试卷
- 车辆管理系统实施方案
- 【PR 2021】Adobe Premiere 2021 软件下载及安装教程
- 世界地图可以无限放大_不敢相信!世界地图,你竟然骗了我这么多年...
- php云人才伪静态,骑士cms(骑士人才系统)伪静态设置方法
- UZCMS镜像站群旗舰版镜像程序SEO源码
- linphone 回声消除
- Kendo UI使用方法与教程
- 基于JAVA-公益劳动招募管理系统-计算机毕业设计源码+系统+mysql数据库+lw文档+部署