一个我的项目应用腾讯地图
之前应用的是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绑定点击事件 }