高德地图动态渲染marker

data() {
return {
flag: true,
flag2: false,
dataTree: []
};
},
unitBuilding() {
this.$axios
.post(“sinhic-service-website/unit/building/list”, {
page: 1,
pagesize: 9999
})
.then(res => {

      if (res.status === 200) {this.dataTree = res.data.list;}let markerList = [];let positionX = 0;let positionY = 0;for (let i = 0; i < this.dataTree.length; i++) {positionX =positionX + parseFloat(this.dataTree[i].coordinate.split(",")[0]);positionY =positionY + parseFloat(this.dataTree[i].coordinate.split(",")[1]);}var map = new AMap.Map("container", {mapStyle: "amap://styles/b12367f2f40ea09b8ae2309649bdb07d", //设置地图的显示样式zoom: 10, //设置地图的缩放级别center: [parseFloat(positionX / this.dataTree.length),parseFloat(positionY / this.dataTree.length)] //设置地图的中心点});map.clearMap();for (let i = 0; i < this.dataTree.length; i++) {if (this.dataTree[i].statusFlag == 1) {var icon=new AMap.Icon({image:"../../static/keyPoint_green.png",size: new AMap.Size(128, 128), //图标大小imageSize: new AMap.Size(37, 37)});}else if (this.dataTree[i].statusFlag == 2) {var icon=new AMap.Icon({image:"../../static/keyPoint_yellow.png",size: new AMap.Size(128, 128), //图标大小imageSize: new AMap.Size(37, 37)});}else if (this.dataTree[i].statusFlag == 3) {var icon= new AMap.Icon({image: "../../static/keyPoint_red.png",size: new AMap.Size(128, 128), //图标大小imageSize: new AMap.Size(37, 40)});} else if (this.dataTree[i].statusFlag == 4) {var icon= new AMap.Icon({image:"../../static/keyPoint_orange.png",size: new AMap.Size(128, 128), //图标大小imageSize: new AMap.Size(37, 37)});}var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});var layer = new AMap.TileLayer.RoadNet();layer.Nu=false;layer.G.detectRetina=falselayer.Qi.detectRetina=falselet marker = new AMap.Marker({icon: icon,zIndex: 101,map: map,position: [this.dataTree[i].coordinate.split(",")[0],this.dataTree[i].coordinate.split(",")[1]],// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]//title: this.dataTree[i].buildName});marker.setMap(map);//  marker.setTitle(this.dataTree[i].buildName);if(this.dataTree[i].statusFlag == 3){marker.setAnimation("AMAP_ANIMATION_BOUNCE");marker.setAnimation("AMAP_ANIMATION_BOUNCE");}// marker.content = "我是第2个Marker";marker.on("click", markerClick);function markerClick(e) {infoWindow.setContent(e.target.content);infoWindow.open(map, e.target.getPosition());}marker.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-labeloffset: new AMap.Pixel(-15, 36), //修改label相对于maker的位置content: this.dataTree[i].buildName});AMap.plugin("AMap.ToolBar", function() {//异步加载插件var toolbar = new AMap.ToolBar();map.addControl(toolbar);});}});
},

高德地图动态渲染marker相关推荐

只用一个marker 替换高德_Android基于高德地图完全自定义Marker的实现方法
前言相信做地图社交类APP开发的大家都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式.本文中实现的方式都是基于高德地图的,百度地图也类似,大家可以照葫芦画瓢,废话不多 ...
android高德marker添加点击,高德地图上添加marker，给每一个marker添加点击事件。...
高德地图上添加marker,给每一个marker添加点击事件. 高德地图上添加marker,给每一个marker添加点击事件.javascript var watch = [] $.ajax({ ty ...
高德地图sdk设置marker并且将设置为地图中心
高德地图sdk设置marker并且将设置为地图中心,直接在官方demo里改,授权key需要改为自己的. <!doctype html> <html> <head>& ...
高德地图开发：Marker 与 Polyline
高德地图:Marker 与 Polyline 项目场景: 效果展示: 解决思路: 详细设计: MARKER 不同标记物的形状 Polyline 的动态路径显示或者隐藏代码展示: 解决思路分析: 路径 ...
高德地图点击marker图标改变效果实现过程
想在集成的高德地图中实现一个marker受到点击时,图标变大的效果,网上查了好多,要么不符合我的需求,要么语焉不详,干脆自己动手写了个,现在把代码分享出来 aMap.setOnMarkerClickL ...
高德地图API总结--Marker多点聚合
Marker多点聚合计算什么是多点聚合呢?所谓的多点聚合,就是计算地图上一定范围内的点的个数,然和讲所有的点统计的数量显示在范围内设置的marker上:我们需要解决的问题有:1.在地图上划定区域范围 ...
js添加多marker 高德地图_高德地图点聚合--Marker多点聚合及多个marker点击事件
本篇文章主要是高德地图的多点聚合,及多个marker点击事件以下为简单的模拟数据 soogif (1).gif image.png 具体代码如下点聚合 html, body, #container ...
高德地图中隐藏Marker的标记
在开发高德地图时,可以使用Marker的setLabel()函数设置浮动标记. 做了一个功能,每选中一个点时,在上方显示文字信息. marker.setLabel({direction:'top',o ...
高德地图map.add(marker)，marker标记不显示
今天使用了高德地图的map.add(marker),使用从后端获取的经纬度在地图上面标记一个点,不知道为什么,是按照高德地图的官方文档来得,但是还是一直没有出现标记点,我把js翻来覆去改了好多遍,代码 ...

高德地图动态渲染marker

高德地图动态渲染marker相关推荐

最新文章

热门文章

高德地图 动态渲染marker

高德地图 动态渲染marker相关推荐

最新文章

热门文章

高德地图动态渲染marker

高德地图动态渲染marker相关推荐