将 Google 地图标记图标更改为自定义图标答案

【问题标题】：Changing Google Maps marker icon to custom icon将 Google 地图标记图标更改为自定义图标
【发布时间】：2017-08-01 12:01:32
【问题描述】：

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

我还应该提到，我通过页面的元数据（通过 Muse 中的页面 > 页面属性 > 元数据访问）将 Google Maps API（使用我的相关密钥）链接到页面的“头部”。

按照 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>

【问题讨论】：

标签： javascript html google-maps google-maps-api-3 muse

【解决方案1】：

快速浏览一下 Google Maps API 即可找到page。

深入研究 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'
});

【讨论】：

【解决方案2】：

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

参考以下代码，

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);

【讨论】：

【解决方案3】：

在“var marker”对象中，有一个“icon”参数。根据文档here，您想创建另一个变量，其中存储了您的图标，然后将图标设置在您当前拥有的标记对象内。

【讨论】：

【解决方案4】：

有两种方法可以在标记上设置图标。您可以在标记初始化期间或之后设置图标（使用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);

Here 是完整的文档，here 是 google maps api 参考。

【讨论】：

这很好用，但是只有使用您提供的 Google 海滩标志图标，所有 Google 图标都可以正常工作，但是当我链接到我自己的图标时却没有。 ` var image = '/Images/Assets/pp-location-split.svg'; var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: image, title: 'Precision Profiles Manufacturing' });`
我一定是错误地链接了我的自定义图标图像，这是我认为会导致 Google 图标出现但不是我自己的图标的唯一原因！
初始化图标时尽量设置完整的url。您是否在控制台中看到一些错误？

【解决方案5】：

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

所以也许你可以：

1/ 隐藏默认标记：

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

2/ 然后创建一个nearby Place request。

3/ 添加你自己的marker with your custom image。

【讨论】：