vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)

最近在项目开发中用到了aMap高德地图，简单记录一下，话不多说，直接上代码。
官方文档参考：高德地图aMap官方文档
1、安装amp

npm install vue-amap --save

2、main.js里引入amap

import AMap  from 'vue-amap'//引入高德地图并初始化
Vue.use(AMap)
AMap.initAMapApiLoader({//集合秘钥keykey:'9dda7871b127d833afdc75274e12ae44',//插件集合plugin:["AMap.Autocomplete", //输入提示插件"AMap.PlaceSearch", //POI搜索插件"AMap.Scale", //右下角缩略图插件 比例尺"AMap.OverView", //地图鹰眼插件"AMap.ToolBar", //地图工具条"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制"AMap.PolyEditor", //编辑 折线多，边形"AMap.CircleEditor", //圆形编辑器插件"AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置]
})

3、在需要引入amap的组件内进行使用，其中el-amap-marker是进行坐标标识、el-amap-info-window进行信息窗体的实现。

<div class="aMap-wrapper"><el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle"><el-amap-markerv-for="marker in markers":position="marker.position":key="marker.id":events="marker.events":icon="marker.icon"></el-amap-marker><el-amap-info-windowv-if="window":position="window.position":visible="window.visible":content="window.content":offset="window.offset"></el-amap-info-window></el-amap></div>

4、data区进行数据初始化

data() {return {center: [121.126757,31.140653],zoom:12,mapStyle: "amap://styles/blue", //修改地图的背景颜色markers: [],windows:[],window:'',}},

5、根据需求引入自定义的坐标图标

import location from '../../../assets/img/waterLogo@3x.png'

6、methods方法定义标识pointMarker数据，我这里写的是静态数据，后续相关数据可通过接口获取。

methods:{point(){//自定义map点坐标图标let icon = new AMap.Icon({image: location,size: new AMap.Size(2, 2),imageSize: new AMap.Size(2, 2)});let markers = [];let windows=[];let that=this;let pointMarker=[{lng:120.978008,lat:31.083667,stationName: "青浦水文站1",buildTime:'2011-12-08',//建站时间stationAddress:'上海市牛头山路东100m',//站址temperature:'25.5℃',//温度rainfall:'5mm',//雨量windDirection:'西北',//风向windSpend:'2.05m/s',//风速waterLevel:'2.65m',//水位waterVelocity:'1.2m/s',//流速waterTraffic:'2.8m³/s',//流量},{lng:121.037746,lat:31.105422,stationName: "青浦水文站2",buildTime:'2011-12-08',//建站时间stationAddress:'上海市牛头山路东100m',//站址temperature:'25.5℃',//温度rainfall:'5mm',//雨量windDirection:'西北',//风向windSpend:'2.05m/s',//风速waterLevel:'2.65m',//水位waterVelocity:'1.2m/s',//流速waterTraffic:'2.8m³/s',//流量}]pointMarker.forEach((item,index)=>{markers.push({position: [item.lng,item.lat],icon:location, //不设置默认蓝色水滴events: {click() {that.windows.forEach(window => {window.visible = false; //关闭窗体});that.window = that.windows[index];that.$nextTick(() => {that.window.visible = true;//点击点坐标，出现信息窗体});}}})windows.push({position: [item.lng,item.lat],content:"" +"<div>"+"站点名称："+item.stationName+"</div>" +"<div>"+"建站时间："+item.buildTime+"</div>" +"<div>"+"地 址："+item.stationAddress+"</div>" +"<div>"+"温度："+"<span style='color: #66A0FF'>"+item.temperature+"</span>"+"</div>"+"<div>"+"雨量："+"<span style='color: #66A0FF'>"+item.rainfall+"</span>"+"</div>"+"<div>"+"风向："+"<span style='color: #66A0FF'>"+item.windDirection+"</span>"+"</div>"+"<div>"+"风速："+"<span style='color: #66A0FF'>"+item.windSpend+"</span>"+"</div>"+"<div>"+"水位："+"<span style='color: #66A0FF'>"+item.waterLevel+"</span>"+"</div>"+"<div>"+"流速："+"<span style='color: #66A0FF'>"+item.waterVelocity+"</span>"+"</div>"+"<div>"+"流量："+"<span style='color: #66A0FF'>"+item.waterTraffic+"</span>"+"</div>",offset:[5,-15],//窗体偏移visible: false//初始是否显示})})//添加点标注this.markers = markers;//生成弹窗this.windows=windows},},

7、mounted方法区调用上述的point()方法：

mounted(){this.point()}

8、下面是效果图：

搞定、兄弟萌赶快试试吧。

vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)相关推荐

高德地图 API，点击地图标记获取自定义标记 (Marker) 中的信息
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息通过高德地图 JS Web 添加自定义图标,自定义窗口标记已经能在地图中正常添加自定义标记了这篇文章讲讲点击标记时,如何 ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue使用高德地图原生API实现省份添加背景色，文字标注；实现点聚合和点标记点击之后出现信息窗体的功能
功能描述:初始状态下,可以看到所有数据在地图上的分布的省份及相应的分布数量,点击点标注可以弹出对应的详细信息. 该例子使用了高德地图原生API去实现上述功能,效果图如下: 下面附上实现步骤: 1. v ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿
使用vue和高德地图,仿58地图找房pc端,且解决marker过多卡顿 1.在index.html引入高德地图链接 https://webapi.amap.com/maps?v=1.4.15& ...
vue2（webpack）调用amap高德地图及其UI组件
vue2(webpack)调用amap高德地图及其UI组件和标记物 aiprose 个人随笔上线,网址 aiprose.com 点击访问 https://www.aiprose.com/blog/3 ...

vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)

vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)

vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)相关推荐

最新文章

热门文章