高德地图mark按类型批次显示不同的颜色

3058

1、header引入高德地图JS,并携带高的账户的应用KEY

2、建立地图

var map = new AMap.Map('container', {

        zoom: 12,

        center: [中心点经纬度],

});

3、设定mark图标样式

var style = [{

        url: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',

        anchor: new AMap.Pixel(6, 6),

        size: new AMap.Size(26, 42),

        zIndex: 3,

    }, {

        url: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',

        anchor: new AMap.Pixel(4, 4),

        size: new AMap.Size(16, 32),

        zIndex: 2,

    }, {

        url: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',

        anchor: new AMap.Pixel(3, 3),

        size: new AMap.Size(15,20),

        zIndex: 1,

    }

    ];

此处不了解什么时候用大中小图标

4、获得数据点的经纬度,label名称,使用的样式

var shops=[这里是后台提供的数据点集合];

    var mass = new AMap.MassMarks(shops, {

        opacity: 0.8,

        zIndex: 111,

        cursor: 'pointer',

        style: style

    });

    var marker = new AMap.Marker({content: ' ', map: map});

    mass.on('mouseover', function (e) {

        marker.setPosition(e.data.lnglat);

        marker.setLabel({content: e.data.name})

    });

    mass.setMap(map);


集合的元素json格式:

{lnglat:[经纬度],name:"鼠标点击显示的MARK文字",style:2}




无人货架批量大规模上架商品解决方案

架构设计之初未考虑到业务需要批量上架商品,几万个逐一生成货架商品需要耗费大量人力,而货架商品的结构数量都一样。...

物业小区无人销售智能货架方案

小区无人值守货架销售的建设方案,从三个方面阐述货架集成建设,投入使用,系统管理。...

厨余收运管理系统迭代开发,回收系统优化升级

完成基础数据开发,试运行一段时间后,在数据沉淀的基础上对数据进行挖掘,对业务处理进行优化升级。...

餐厨油脂再生资源收运回收管理系统方案

通过互联网+改变餐厨收运回收传统工作方式,移动手机助力系统提供工作效率、’管理效率,数据电子化打造收运大数据建设。...

医馆诊所管理系统

实现中医馆中诊所,理疗的业务处理,分为小程序用户端,医生端,管理端,PC管理端,PC服务台,PC医生端...

thinkphp8安装VIEW,多应用,验证码

官方THKPHP8默认只有单应用一个控制器,其他插件可按需安装,通常需要VIEW和多应用...

sqlserver中的nvarchar和varchar的区别

数据库表中nvarchar和varchar都可以用来表示字符的存储类型。...

微信接口开发返回码一览表

返回错误码对照表...

高德地图mark按类型批次显示不同的颜色

大量数据点显示在地图上,通常使用海量点的API展示,通过建立多个海量点达到按分类显示不同颜色的mark,看起来更直观...

餐厨垃圾收运小程序需要什么条件

建立一个小程序的硬件设施需要服务器,域名,若干个邮箱...