我正在使用Google Maps API构建一个充满标记的地图,但我希望其中一个标记能从其他标记中脱颖而出。我认为,最简单的做法是将标记的颜色改为蓝色,而不是红色。这是一件简单的事情,还是我必须创建一个全新的图标?如果我必须创建一个新图标,最简单的方法是什么?
发布于 2020-05-15 19:59:59
This relatively recent article提供了一个简单的示例,其中包含一组有限的Google Maps彩色图标。
有关使用蓝色和橙色地图标记的真实网站示例,请参阅this website并查看谷歌地图下的脚本。
<section id="map" class="map">
<script>
let map;
const speediwash = { lat: 52.656937, lng: -8.634390 };
const stJosephX = { lat: 52.658041, lng: -8.632414};
// const maryI = { lat: 52.653192, lng: -8.638974 };
const trainStn = { lat: 52.658757, lng: -8.623560 };
// const claytonH = { lat: 52.660802, lng: -8.636411 };
let markersArray = []; // Global array to store the marker object
function initMap()
{
map = new google.maps.Map(document.getElementById('map'),
{
center: stJosephX,
zoom: 15.1
});
addMarker(speediwash, "Speediwash", "blue");
//addMarker(maryI, "Mary I College", "green");
addMarker(trainStn, "Train Station", "orange");
//addMarker(claytonH, "Clayton Hotel", "purple");
}
function addMarker(latLng, alabel, color)
{
let url = "https://maps.google.com/mapfiles/ms/icons/";
url += color + "-dot.png";
let marker = new google.maps.Marker(
{
map: map,
position: latLng,
label: alabel,
icon:
{
url: url,
labelOrigin: new google.maps.Point(60, 30)
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANwXk4HVQv7w5WAEUCStjAgT25b0s0p1Y&callback=initMap">
</script>
https://stackoverflow.com/questions/2472957
复制相似问题