javascript - Google 在 icon-fillColor 和 strokeColor 之间映射标记图标填充
问题描述
我正在尝试在 icon-fillColor 和外部 StrokeColor 之间创建一个带有填充的 Google 地图标记图标。
我的标记代码:
marker = new google.maps.Marker({
id: i,
position: position,
label: {
text: 'id',
color: "white",
fontWeight: 'bold',
fontSize: '16px',
},
map: map,
title: "My Title",
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 15,
fillColor: "#4A86FE",
fillOpacity: 1.0,
strokeWeight: 6,
strokeOpacity: 0.8,
strokeColor:"red",
rotation: 30
},
animation: google.maps.Animation.DROP,});
我当前的输出:如果你能看到内蓝色圆圈和外红色圆圈相互接触。我正在尝试在内部和外部之间编码白色。检查我的预期输出。
我想要达到的目标如下:
解决方案
像这样(使用两个重叠标记)应该可以工作,您可以添加其他参数(或创建“选项”对象)来定义各个部分的颜色:
function makeComplexIcon(map, latLng, fillColor, stripeColor, outsideColor, title, id, label) {
var bottom = new google.maps.Marker({
zIndex: 10, // bottom
id: id,
position: latLng,
map: map,
title: title,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 15,
fillColor: fillColor,
fillOpacity: 1.0,
strokeWeight: 6,
strokeOpacity: 0.8,
strokeColor: outsideColor,
rotation: 30
},
});
var top = new google.maps.Marker({
zIndex: 15, // top
id: id,
position: latLng,
label: label,
map: map,
title: title,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 15,
fillColor: fillColor,
fillOpacity: 1.0,
strokeWeight: 2,
strokeOpacity: 0.8,
strokeColor: stripeColor,
rotation: 30
},
});
代码片段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -25.363882,
lng: 131.044922
}
});
var position = map.getCenter(),
i = 10;
makeComplexIcon(map, position, "#4A86FE", "white", "red", "My Title", i, {
text: 'id',
color: "white",
fontWeight: 'bold',
fontSize: '16px',
});
makeComplexIcon(map, {
lat: -27.6728168,
lng: 121.6283098
}, "green", "yellow", "orange", "W. Australia", 12, {
text: 'id1',
color: "blue",
fontWeight: 'bold',
fontSize: '16px',
})
makeComplexIcon(map, {
lat: -30.0,
lng: 136.2
}, "black", "white", "black", "S. Australia", 14, {
text: 'id2',
color: "red",
fontWeight: 'bold',
fontSize: '16px',
})
}
function makeComplexIcon(map, latLng, fillColor, stripeColor, outsideColor, title, id, label) {
var marker = new google.maps.Marker({
zIndex: 10, // bottom
id: id,
position: latLng,
map: map,
title: title,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 15,
fillColor: fillColor,
fillOpacity: 1.0,
strokeWeight: 6,
strokeOpacity: 0.8,
strokeColor: outsideColor,
rotation: 30
},
});
var marker = new google.maps.Marker({
zIndex: 15, // top
id: id,
position: latLng,
label: label,
map: map,
title: title,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 15,
fillColor: fillColor,
fillOpacity: 1.0,
strokeWeight: 2,
strokeOpacity: 0.8,
strokeColor: stripeColor,
rotation: 30
},
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
推荐阅读
- r - 如何添加具有存储在 data.table 或 tibble 中的线性模型的预测列?
- c# - 在 Windows 更新和 Office 升级后,在 COM 插件中使用 WindowsFormsHost 会引发 ApplicationException
- javascript - 如何连接数字或计算与字符串错误:“预期数字类型”Angular
- doctrine-orm - 学说 2 实体未填充子元素
- javascript - 如何让 AJAX 在 div 顶部加载页面
- bash - AWS EC2 用户数据:使用 sudo 时无法识别命令
- excel - 将新的excel文件保存在单元格中指定的文件目录中
- xaml - 如何使用 WPF 设计复杂的表格
- c++ - 将具有空值的字符数组写入文件流
- google-sheets - 带通配符的 VLOOKUP 并找到第 N 次出现?