Titanium Appcelerator在Annotations(地图模块)上圆角?

时间:2017-04-01 18:23:22

标签: google-maps annotations titanium appcelerator marker

这是我的代码分为Alloy / JS / Styling 无论我放置它忽略它的borderRadius/borderWidth属性

合金:

<Label id="image_label"></Label>

JS:

function setAnnotation(location) {

   var annotation = map.createAnnotation({
   title: location.title,
   subtitle: location.latitude + ', ' + location.longitude,
   latitude: location.latitude,
   longitude: location.longitude,
   image: $.image_label.toImage(),
   borderRadius:22, //DOESNT WORK
   borderWidth: 6, //DOESNT WORK

   });

$.map.setAnnotations([annotation]);
}

风格:

//LABEL ANNOTATION
"#image_label": {
color : 'black',
font : {fontSize:'15dp',font:"monospace",fontWeight:"bold"},
height : '30dp',
width : '30dp',
borderRadius:999,   //DOESNT WORK
borderWidth: 99,  //DOESNT WORK
backgroundImage:'https://pbs.twimg.com/profile_images/604644048/sign051.gif'

}

1 个答案:

答案 0 :(得分:2)

最好的方法是创建一个View和一个Label,并将borderRadius / borderWidth / backgroundImage添加到View中,然后在最后将view.toImage()添加到注释中。请记住,注释本身没有borderRadius / borderWidth属性(http://docs.appcelerator.com/platform/latest/#!/api/Modules.Map.Annotation

var view = Ti.UI.createView({
  width:30,
  height:30,
  borderRadius:15,
  borderWidth: 3,
  backgroundImage:'https://pbs.twimg.com/profile_images/604644048/sign051.gif'
});
var lbl = Ti.UI.createLabel({
    text:"2"
});
view.add(lbl);

mapView.addAnnotation(
    maps.createAnnotation({
        latitude: 37.368122,
        longitude: -121.913653,
        title: "company",
        image: view.toImage()
    })
)

您还可以将其放入窗口小部件的视图中,并使用参数填充文本/图像以使用Alloy的强大功能,并使代码不受视图代码的影响。