当前位置: 首页 > Web前端 > vue.js

记得有一次Vue引入腾讯地图标记自定义图片不显示

时间:2023-03-31 18:41:15 vue.js

之前有一个项目使用腾讯地图,使用的是v2版本的标记自定义图标。没有问题,因为项目整体风格偏暗,需要自定义地图风格。v2版本没有这个功能,只能切回v1版本,因为代码逻辑不是很难改造。我遇到的最大的问题是我写了markerstyles的src属性但是没有生效。看了文档说格式是url或者base64。图片转成base64后没有显示出来,因为我是循环添加的。一开始是在循环中调用了一个新的TMap。MultiMarker的方法,但是官方的例子是geometries参数是整个数组,所以我把坐标信息整合成一个数组传给geometries。我发现不可能打印整个标记。我发现地图上有一个默认的点标记样式。我想如果我改变这个要设置的图标会有效果吗?我真的可以贴出地图的整个逻辑if(document.getElementById('container').innerHTML!=""){//清空地图容器document.getElementById('container').innerHTML==""}letcenter=newTMap.LatLng(this.centerLat,this.centerLng)this.map=newTMap.Map(document.getElementById('container'),{center:center,//设置地图中心点坐标zoom:15,//缩放级别mapStyleId:'style2'//这里是需要在控制台配置的自定义地图的样式名称});letgeoArr=[]//坐标数组lettime=0//用来判断循环是否完成letnum=this.geoList.length//总循环次数for(letninthis.geoList){//循环后台数据时间+=1ge??oArr.push({'id':this.geoList[n].geo_hash,//id唯一标识不可重复添加'stykeId':'marker','position':newTMap.LatLng(this.geoList[n].lat,this.geoList[n].lng),//点标记位置'properties':{title:this.geoList[n].loc_title}})}if(time==num){//如果循环完成,调用add方法varmarker=newTMap.MultiMarker({id:'marker',map:this.map,styles:{"default":newTMap.MarkerStyle({//这里的marker改成default来代替默认样式"width":25,"height":35,"anchor":{x:16,y:32},"src":this.geoIcon//使用requireimport写入data})},geometries:geoArr//坐标数组})marker.on('click',this.clickMarker)//给marker绑定点击事件}