Javascript 如何更改OpenLayers标记（“功能”）的外观？

我正在努力学习一些OpenLayers API，并让它显示一些功能对象，但它们是蓝色的圆圈，我希望它们看起来更像谷歌地图中的标记。我怎样才能改变他们的外表

开放层覆盖
.ol弹出窗口{
字体系列：'Lucida Grande'，Verdana，日内瓦，Lucida，Arial，Helvetica，sans serif！重要；
字体大小：12px；
位置：绝对位置；
背景色：白色；
-webkit过滤器：投影（0 1px4pRGBA（0,0,0,0.2））；
滤镜：阴影（0.1px4pRGBA（0,0,0,0.2））；
填充：15px；
边界半径：10px；
边框：1px实心#中交；
底部：12px；
左：-50px；
最小宽度：100px；
}
.ol弹出窗口：之后，
.ol弹出窗口：之前{
最高：100%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.ol弹出窗口：在{
边框顶色：白色；
边框宽度：10px；
左：48px；
左边距：-10px；
}
.ol弹出窗口：之前{
边框顶色：#中交；
边框宽度：11px；
左：48px；
左边距：-11px；
}
.ol弹出式关闭器{
文字装饰：无；
位置：绝对位置；
顶部：2个；
右：8px；
}
.ol弹出式关闭器：之后{
内容：“✖";
颜色：#C3C3；
}
变量标记_数据=[
{名称：'塔桥'，纬度：51.5053591，伦敦：-0.0829981}，
{名称：'多佛城堡'，纬度：51.120034，伦敦：1.2712337}，
{名称：'华盛顿纪念碑'，洛杉矶：38.8894541，伦敦：-77.0373655}，
{名称：“埃菲尔铁塔”，纬度：48.8583701，纬度：2.2922873}，
{名称：'自由女神像'，纬度：40.6892494，伦敦：-74.0466944}
];
var layer=新ol.layer.Tile({
来源：new ol.source.OSM（）
});
var center=ol.proj.transform（[-1.812,52.443]，'EPSG:4326'，'EPSG:3857'）；
/*var overlay=新ol.overlay({
元素：document.getElementById（'overlay'），
定位：“底部中心”
});*/
var popup=document.getElementById（'popup-content'）；
var container=document.getElementById（'popup'）；
var closer=document.getElementById（'popup-closer'）；
var overlay=新ol.overlay({
元素：容器，
自动扫描：是的，
自动规划：{
持续时间：250
}
});
变量视图=新的ol.view({
中心:中心,，
缩放：6
});
var map=新ol.map({
目标：“地图”，
图层：[图层]，
视图：视图
});
map.addOverlay（覆盖）；
变量样式={
图标：“待办事项”
};
/*
//为单击事件注册事件处理程序
映射（'单击'）功能（事件）{
//以地图投影单位提取单击事件的空间坐标
var coord=event.coord；
//将其转换为十进制度数
变量度=ol.proj.transform（坐标，'EPSG:3857'，'EPSG:4326'）；
//设置可读版本的格式
var hdms=ol.坐标系toStringHDMS（度）；
//更新覆盖元素的内容
var element=overlay.getElement（）；
element.innerHTML=hdms；
//定位元素（使用地图投影中的坐标）
覆盖。设置位置（坐标）；
//并将其添加到地图中
map.addOverlay（覆盖）；
});*/
var vsource=new ol.source.Vector（）；
marker_data.forEach（函数（数据、索引）{
变量标记=新的ol.特征({
键入：“图标”，
名称:索引,，
几何：新的ol.geom.Point（ol.proj.fromLonLat（[data.lon，data.lat]））
});
vsource.addFeature（标记）；
});
var动画=假；
var vectorLayer=新ol.layer.Vector({
来源：vsource
});
map.on（'singleclick'，函数（事件）{
if（map.hasFeatureAtPixel（event.pixel）==true）{
console.log（事件）；
var坐标=event.coordinate；
/*
getFeatures（{pixel:event.pixel，
图层：[矢量图层]，
成功：功能（featuresbylayer）{
console.log（featuresbylayer）；
}});
*/
var f=vsource.getClosestFeatureToCoordinate（坐标）；
控制台日志（f）；
var fcoords=f.getGeometry（）.getCoordinates（）；
var index=f.get（'name'）；
var marker_info=marker_数据[索引]；
popup.innerHTML=''+标记信息['name']+''；
覆盖设置位置（fcoords）；
}否则{
覆盖设置位置（未定义）；
closer.blur（）；
}
});
map.addLayer（矢量层）；

要更改功能的外观，必须为其指定样式，例如

marker.setStyle(
  new ol.style.Style({
    image: new ol.style.Icon({
      src: 'https://maps.google.com/mapfiles/kml/paddle/red-blank.png',
      anchor: [0.5, 1],
      scale: 0.5
    })
  })
);

---

有关更多原始Gooogle图标，请转到并单击图标以获取链接。

grrrr单击此代码段视图中的标记似乎不起作用；此代码独立运行，非常简洁，谢谢；我将尝试它。