嗨，我对这个话题很陌生，经过几个小时尝试我接近目标，但不是那里，我想我需要一点点。
到目前为止，我能够创建一个样式化的地图，并在地图上获得2个标记。 放大和其他一些东西对我来说很清楚如何影响。
这是代码：
<html>
<head>
<title> test map </title>
<style type="text/css">
#map {
width: 750px;
height: 500px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', init);
function init()
{
var mapOptions = {
zoom: 2,
panControl: true,
zoomControl: true,
center: new google.maps.LatLng(33.524385, -112.048899),
//
styles: [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}]}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 20}]}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}]}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"}, {
"lightness": 29}, {
"weight": 0.2}]}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 18}]}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 16}]}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 21}]}, {
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"}, {
"color": "#000000"}, {
"lightness": 16}]}, {
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36}, {
"color": "#000000"}, {
"lightness": 40}]}, {
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"}]}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 19}]}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"}, {
"lightness": 20}]}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}, {
"weight": 1.2}]}]
};
var mapElement = document.getElementById('map');
var myMap = new google.maps.Map(mapElement, mapOptions);
var pos = new google.maps.LatLng(33.524385, -12.048899);
var poi_marker = new google.maps.Marker(
{
map: myMap,
draggable: false,
animation: google.maps.Animation.DROP,
position: pos
});
var pos = new google.maps.LatLng(5.524385, -12.048899);
var poi_marker = new google.maps.Marker(
{
map: myMap,
draggable: false,
animation: google.maps.Animation.DROP,
position: pos
});
}
</script>
</head>
<body>
<div id="map"> </div>
</body>
</html>
什么对我来说很好。 我看到我喜欢的风格加上经典标记的2个位置。
上方的代码映射然后我看了一下，发现你可以有带标记的信息框。 我想为我创建的每个标记添加HTLM到这些框。
谷歌代表。给出了这个适合我的例子：https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max?hl=en
我想在我的地图上添加一些像我在2个简单标记位置上所做的那样，但老实说我不知道在上面的链接中放置代码的位置。
在过去的2小时内尝试了所有类型，现在已经开始了。我做错了，因为这应该有用。
然后，如果有人知道，糖果上的樱桃会在哪里放置代码以给予Marker我自己的风格。我找到了一些例子。所以我很乐意让它一直定制。 感谢您的帮助，想法或任何贡献！答案 0 :(得分：1)
当您点击标记时，您希望信息框能够传播吗？为此，您需要设置一个侦听每个绘制标记的侦听器，然后在完成后生成一个信息框。
function infoBoxCreator() {
var raInfoBoxElement = document.createElement('div');
var infoBoxInfo = document.createElement('div');
infoBoxInfo.className = 'infobox_content';
infoBoxInfo.innerHTML = 'Text In My Infobox';
raInfoBoxElement.appendChild(raNameElement);
var infoBoxText = raInfoBoxElement;
plotMarker(infoBoxText);
}
function plotMarker(infoBoxText) {
var coordinate = new google.maps.LatLng(someLAT, someLONG);
var infowindow = new google.maps.InfoWindow();
// Create the marker
var marker = new google.maps.Marker({
map: map,
position: coordinate
});
// Create Info window and destroy any other open infowindows
google.maps.event.addListener(marker, "click", function() {
if (infowindow)
infowindow.close();
infowindow = new google.maps.InfoWindow({content: infoBoxText});
infowindow.open(map, marker);
});
编辑：按标记样式，您的意思是自定义图标吗？在google.maps.Marker中只需输入icon: new google.maps.MarkerImage(FILEPATH)，然后输入您要用作自定义标记的图像的文件路径。
编辑2：还是一大早。我忘记了var infowindow = new google.maps.InfoWindow();我现在已经添加了它。
编辑3 ：在信息框已经正常工作的地图中，只需将mapOptions设为：
var mapOptions = {
center: new google.maps.LatLng(37.276087947677254, -12.048898999999995),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]}],
streetViewControl: false
};
这对我有用。