一个项目使用腾讯地图
之前使用的是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绑定点击事件
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。