vue使用高德地图实现多种点样式海量点渲染及信息显示

1.创建地图

定义所需变量

 data() {return {map: null,styleObjectArr: [],massMarks: null,marker: {},mapData: [],}},

创建地图，在mounted中调用创建地图函数

 init() {this.map = new AMap.Map("map-box", { //map-box为地图容器center: [120.27643, 30.1527],resizeEnable: true,zoom: 12,mapStyle: "amap://styles/darkblue",})},

2.获取地图坐标信息

async getMapData() {let _this = thislet { data: res } = await _this.$axios.get("/api/...."//获取轨迹坐标信息接口地址)if (res.code == 1) {_this.mapData = res.data/*数据结构，可以让后台封装或者直接封装data = [{lnglat: [116.405285, 39.904989],name: '要显示的信息',id:1,style: 0  // 该数据的样式取值styleObjectArr数组对应的样式索引},{lnglat: [116.405285, 39.904989],name: '要显示的信息',id:2,style: 1} ];*/_this.getMassMarks()//创建海量点marker} else {_this.$message.warning(res.msg)}},

3.创建海量点标记信息

getMassMarks() {let _this = this//创建多种类点样式数组_this.styleObjectArr = [{url: require("@/assets/images/base-station.png"), // 本地图标地址引入//url: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',  // 线上图标地址引入方式size: new AMap.Size(20, 30), // 图标大小anchor: new AMap.Pixel(5, 5), // 图标显示位置偏移量，基准点为图标左上角zIndex: 1,//设置层级，值大的显示在上层},{url: require("@/assets/images/4S-shop.png"), // 图标地址size: new AMap.Size(20, 30), // 图标大小anchor: new AMap.Pixel(5, 5), // 图标显示位置偏移量，基准点为图标左上角zIndex: 2,},]_this.massMarks = new AMap.MassMarks(_this.mapData, {zIndex: 100, // 相对于地图海量点图层叠加的顺序zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层cursor: "pointer",style: _this.styleObjectArr, //多种样式对象的数组})_this.marker = new AMap.Marker({ content: " ", map: _this.map })//创建marker//鼠标移上显示信息窗体AMap.event.addListener(_this.massMarks, "mouseover", function(e) {_this.marker.setPosition(e.data.lnglat)_this.marker.setLabel({ content: e.data.name })//设置信息窗体内容})//鼠标移开隐藏信息窗体AMap.event.addListener(_this.massMarks, "mouseout", function(e) {_this.marker.setPosition(e.data.lnglat)_this.marker.setLabel({ content: "" })//信息窗体内容清空})// 将 massMarks 添加到地图实例_this.massMarks.setMap(_this.map)},

大部分代码就是这些了，我也是对照高德官方API边学边做的，还是比较简单的，有什么问题欢迎讨论

vue使用高德地图实现多种点样式海量点渲染及信息显示相关推荐

vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
高德地图 amap 设置鼠标样式
我的需求,要在高德地图里面做一个地图选点的功能.这个功能很简单,但是高德地图的默认鼠标样式是一只小手,不适合做选点用. 高德地图中有4中样式如下图对应名称如下: pointer,default,mo ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿
使用vue和高德地图,仿58地图找房pc端,且解决marker过多卡顿 1.在index.html引入高德地图链接 https://webapi.amap.com/maps?v=1.4.15& ...

vue使用高德地图实现多种点样式海量点渲染及信息显示

1.创建地图

2.获取地图坐标信息

3.创建海量点标记信息

vue使用高德地图实现多种点样式海量点渲染及信息显示相关推荐

最新文章

热门文章