将谷歌地图标记图标更改为自定义图标

我一直在使用Adobe muse开发一个网站，我选择在公司的联系页面上实施定制的谷歌地图。我已经使用了一些基本的javascript来做到这一点，通过在我有我的JS中插入"HTML元素"插入到Muse文档中。

我还应该提到，我有谷歌地图API(带有我的相关密钥(通过页面的元数据(通过页面>页面属性>Muse中的元数据访问(在页面的"头部"中链接。

按照Google提供的指南，我创建了一个自定义地图，然后使用通过[https://snazzymaps.com 生成的JS]应用了一些额外的样式。

我的问题出现在尝试用我在 illustrator 中创建的自己的标记(存储在我的 iMac 本地(替换默认标记图标时，我遵循了大量不同的指南并尝试了多种实现自定义图标的方法，但没有任何运气 - 有人可以告诉我哪里出错了？将不胜感激。

以下是我的JS在Muse HTML元素中的外观>

<script> 
function initMap() {
var myLatLng = {lat: 51.454137, lng: -2.473673};
var map = new google.maps.Map(document.getElementById('u64615'),{
zoom: 16,
center: myLatLng,
styles:
[
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#444444"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2f2f2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f10019"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#f10019"
}
]
},
{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#f10019"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
},
{
"weight": "0.01"
}
]
},
{
"featureType": "poi.government",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.medical",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.place_of_worship",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.school",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.sports_complex",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#163742"
},
{
"visibility": "on"
}
]
}]

});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Precision Profiles Manufacturing'
});
var contentString = 
'<div>'+
'<div>'+
'</div>'+
'<h1 style = "font-size:20px;padding-bottom:10px;"><b>Precision Profiles Manuafcturing</b></h1>'+
'<div id="bodyContent">'+
'<p>The regions leading supplier of aircraft and precision engineering solutions.<p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200,
maxHeight: 400,
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});    }   </script>

快速浏览一下Google Maps API会让你进入这个页面。

深入研究 API，您可以看到，当您实例化新google.maps.Marker时，将有一个名为icon:的可选属性。您可以在此处指定存储要使用的图像的目录的字符串路径。

因此，完整地，实例化新标记类的代码将是：

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: "https://your_domain.com/your_directory/your_image.jpg",
title: 'Precision Profiles Manufacturing'
});

如果我们想将宽度和高度应用于自定义图标，

请参考下面的代码，

let icon = {
url: './path/path/custom_icon.png',
scaledSize: { width: 69, height: 41 }
}
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'sample title',
icon: icon
});
marker.setMap(map);

在"var marker"对象中，有一个"icon"参数。根据此处的文档，您希望创建另一个变量，其中存储了您的图标，然后在您当前拥有的标记对象中设置该图标。

有两种方法可以在标记上设置图标。您可以在标记初始化期间或之后(使用marker.setIcon (yourUrl)(设置图标。

女巫给：

初始化

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
icon: image
});
}

初始化后

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
});
}
beachMarker.setIcon (image);

这是完整的文档，这里是谷歌地图 api 参考。

您无法修改默认的 Google 地图标记，只能隐藏它们。

所以也许你可以：

1/隐藏默认标记：

const styles = {
hide: [
{
featureType: "poi",
stylers: [{ visibility: "off" }],
},
],
};
map.setOptions({ styles: styles['hide'] });

2/然后就近提出地点请求。

3/并使用自定义图像添加您自己的标记。

相关内容

最新更新

热门标签：