高德地图JS API之海量点标记十万以内的点

怎么引入高度地图就不写了，官方是这样说的：当需要在地图展示数量为十万以内的点并且需要较好的性能表现时，可以使用 AMap.MassMarks 类。AMap.MassMarks 并不是普通的覆盖物，它实际上是由海量点组成的一个地图图层，目前仅适用于html5浏览器。https://lbs.amap.com/api/jsapi-v2/guide/overlays/massmarker

var map = new AMap.Map("container", {zoom: 5, //级别pitch: 65,rotation: 45,center: [116.397428, 39.90923], //中心点坐标// layers: [new AMap.TileLayer.Satellite()],viewMode: "3D", //使用3D视图mapStyle: "amap://styles/grey"});map.setCity("北京");var style = [{url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",anchor: new AMap.Pixel(6, 6),size: new AMap.Size(11, 11)},{url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",anchor: new AMap.Pixel(4, 4),size: new AMap.Size(7, 7)},{url: "https://a.amap.com/jsapi_demos/static/images/mass2.png",anchor: new AMap.Pixel(3, 3),size: new AMap.Size(5, 5)}];var data = [{lnglat: [116.105285, 39.904989], //点标记位置name: "beijing",id: 1,style:0}, // {}, …,{}, …{lnglat: [116.105285, 39.804989], //点标记位置name: "beijing",id: 2,style:0},{lnglat: [116.305285, 39.904989], //点标记位置name: "beijing",id: 3,style:0},{lnglat: [116.405285, 39.904989], //点标记位置name: "beijing",id: 4,style:0},{lnglat: [116.505285, 39.904989], //点标记位置name: "beijing",id: 5,style:0},{lnglat: [116.605285, 39.904989], //点标记位置name: "beijing",id: 6,style:0},{lnglat: [116.705285, 39.904989], //点标记位置name: "beijing",id: 7,style:0},{lnglat: [116.805285, 39.904989], //点标记位置name: "beijing",id: 8,style:0},{lnglat: [116.905285, 39.904989], //点标记位置name: "beijing",id: 9,style:0},{lnglat: [116.405285, 39.704989], //点标记位置name: "beijing",id: 10,style:2//点的样式},{lnglat: [116.405285, 39.604989], //点标记位置name: "beijing",id: 11,style:0},{lnglat: [116.405285, 39.504989], //点标记位置name: "beijing",id: 12,style:1}];var mass = new AMap.MassMarks(data,{opacity: 0.8,zIndex: 111,cursor: "pointer",style: style,});var marker = new AMap.Marker({ content: " ", map: map });marker.on('click', function(e){console.log("点击了",e.target.getExtData())});mass.on("mouseover", function(e) {marker.setPosition(e.data.lnglat);marker.setLabel({ content: e.data.name });marker.setExtData(e.data.id)});mass.setMap(map);function setStyle(multiIcon) {if (0) {mass.setStyle(style);} else {mass.setStyle(style[2]);}}

高德地图JS API之海量点标记十万以内的点相关推荐

vue高德地图JS API 实现海量点标记展示
官方文档:海量点标记-覆盖物-教程-地图 JS API | 高德地图API 需求:根据后台接口返回的部分数据,这里仅做展示 ,可参考使用. 可以加入弹窗点击的时候. 实现效果: JSAPI 的加载 J ...
高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情，点击点标记放大地图操作
高德地图js API实现:鼠标悬浮于点标记时,弹出信息窗体显示详情,点击点标记时放大地图 <!doctype html> <html> <head><meta ...
高德地图 js API Loca 3D动画的使用说明
高德地图 js API Loca 3D动画的使用说明我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有 center: 平移 pitch: 视角 zoom: 缩放 rotation: ...
cordova下使用高德地图js api在4g流量下定位失败问题的解决
问题描述 cordova页面中使用高德地图js api AMap.Geolocation的geolocation.getCurrentPosition()方法进行定位用手机4g打开该页面,定位失败, ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
高德地图JS API 使用01
最近做项目,有个需求使用到高德地图JS API,现写博客总结一下. 需求要求大概是这样的: 使用地图高德或百度或谷歌都可以(这里吐槽一下,百度地图的jsAPI帮助文档写的太...谷歌你懂的...高德目 ...
Vue 高德地图 js API Loca 如何使用连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用连接线图层.脉冲连线图层阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式已经了解如何载入 Loca 插件如果不了解,可以查看我之 ...

高德地图JS API之海量点标记十万以内的点

高德地图JS API之海量点标记十万以内的点

高德地图JS API之海量点标记十万以内的点相关推荐

最新文章

热门文章