共计 1274 个字符,预计需要花费 4 分钟才能阅读完成。
一个我的项目应用腾讯地图
之前应用的是 v2 的版本 marker 自定义 icon 没什么问题
因为我的项目整体格调是暗色系 须要自定义地图款式 v2 版本没有此性能
只能切换回 v1 版本
因为代码逻辑在 革新的难度不是很大 遇到的问题就是 写了 marker styles 的 src 属性然而并没有失效 看了文档 说格局是 url 或者 base64 将图片转成 base64 后也没有显示
因为我是循环增加的最开始是循环调用的 new TMap.MultiMarker 这个办法 然而官网给的例子是 geometries 参数是整个的数组 于是我把坐标信息整合成数组传进去 geometries 发现也不行
打印整个 marker 发现其中有个 default 是地图默认的点标记款式 想着如果把这个改成要设置的图标会不会有成果 一试还真能够
我把地图整个的逻辑贴出来
if(document.getElementById('container').innerHTML != ""){// 清空 map 容器
document.getElementById('container').innerHTML == ""
}
let center = new TMap.LatLng(this.centerLat,this.centerLng)
this.map = new TMap.Map(document.getElementById('container'), {
center: center,// 设置地图中心点坐标
zoom: 15,// 缩放等级
mapStyleId: 'style2'// 这里是自定义地图的款式名须要在控制台配置
});
let geoArr = []// 坐标数组
let time = 0 // 用来判断是否循环结束
let num = this.geoList.length// 循环总次数
for(let n in this.geoList){// 循环后盾数据
time +=1
geoArr.push({'id': this.geoList[n].geo_hash,//id 惟一标识反复不可增加
'stykeId': 'marker',
'position': new TMap.LatLng(this.geoList[n].lat,this.geoList[n].lng),// 点标记地位
'properties':{title: this.geoList[n].loc_title
}
})
}
if(time == num){// 如果循环实现 调用增加办法
var marker = new TMap.MultiMarker({
id: 'marker',
map: this.map,
styles: {
"default": new TMap.MarkerStyle({// 这里的 marker 改成 default 换掉默认的款式
"width": 25,
"height": 35,
"anchor": {x: 16, y: 32},
"src": this.geoIcon// 写在 data 中应用 require 引入
})
},
geometries:geoArr// 坐标数组
})
marker.on('click',this.clickMarker)// 给 marker 绑定点击事件
}
正文完