將 Google 地圖標記圖標更改為自定義圖標

Question

我一直在使用 Adob​​e muse 開發一個網站，我選擇在公司的聯系頁面上實現一個定制的谷歌地圖。 我已經使用一些基本的 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>

Answer 1

快速瀏覽一下 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'
});

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

Answer 3

在“var marker”對象中，有一個“icon”參數。 根據此處的文檔，您希望使用存儲在其中的圖標創建另一個變量，然后在您當前擁有的標記對象內設置圖標。

Answer 4

有兩種方法可以在標記上設置圖標。 您可以在標記初始化期間或之后設置圖標（使用marker.setIcon (yourUrl) ）。

女巫給：

1. 初始化

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

2. 初始化后

   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 參考。

Answer 5

您無法修改默認的 Google 地圖標記，只能隱藏它們。

所以也許你可以：

1/隱藏默認標記：

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

2/ 然后發出地理編碼請求。

3/ 並用您的自定義圖像添加您自己的標記。