總覽
本教學課程說明如何變更 Google 地圖進階圖示的圖示 標記來使用自訂圖形圖片。瞭解 建立標記的基本知識 可採用的情境
以下地圖範例說明如何使用自訂標記來表示 不同類型的地點
下方部分列出建立地圖時所需的所有程式碼 我們會介紹這個教學課程
TypeScript
let map: google.maps.Map; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: new google.maps.LatLng(-33.91722, 151.23064), zoom: 16, mapId: "DEMO_MAP_ID", }); const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/"; const icons: Record<string, { icon: string }> = { parking: { icon: iconBase + "parking_lot_maps.png", }, library: { icon: iconBase + "library_maps.png", }, info: { icon: iconBase + "info-i_maps.png", }, }; const features = [ { position: new google.maps.LatLng(-33.91721, 151.2263), type: "info", }, { position: new google.maps.LatLng(-33.91539, 151.2282), type: "info", }, { position: new google.maps.LatLng(-33.91747, 151.22912), type: "info", }, { position: new google.maps.LatLng(-33.9191, 151.22907), type: "info", }, { position: new google.maps.LatLng(-33.91725, 151.23011), type: "info", }, { position: new google.maps.LatLng(-33.91872, 151.23089), type: "info", }, { position: new google.maps.LatLng(-33.91784, 151.23094), type: "info", }, { position: new google.maps.LatLng(-33.91682, 151.23149), type: "info", }, { position: new google.maps.LatLng(-33.9179, 151.23463), type: "info", }, { position: new google.maps.LatLng(-33.91666, 151.23468), type: "info", }, { position: new google.maps.LatLng(-33.916988, 151.23364), type: "info", }, { position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), type: "parking", }, { position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), type: "parking", }, { position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), type: "parking", }, { position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), type: "parking", }, { position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), type: "parking", }, { position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), type: "parking", }, { position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), type: "parking", }, { position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), type: "library", }, ]; for (let i = 0; i < features.length; i++) { const iconImage = document.createElement("img"); iconImage.src = icons[features[i].type].icon; const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: features[i].position, content: iconImage, }) } } initMap();
JavaScript
let map; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( "marker", ); map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(-33.91722, 151.23064), zoom: 16, mapId: "DEMO_MAP_ID", }); const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/"; const icons = { parking: { icon: iconBase + "parking_lot_maps.png", }, library: { icon: iconBase + "library_maps.png", }, info: { icon: iconBase + "info-i_maps.png", }, }; const features = [ { position: new google.maps.LatLng(-33.91721, 151.2263), type: "info", }, { position: new google.maps.LatLng(-33.91539, 151.2282), type: "info", }, { position: new google.maps.LatLng(-33.91747, 151.22912), type: "info", }, { position: new google.maps.LatLng(-33.9191, 151.22907), type: "info", }, { position: new google.maps.LatLng(-33.91725, 151.23011), type: "info", }, { position: new google.maps.LatLng(-33.91872, 151.23089), type: "info", }, { position: new google.maps.LatLng(-33.91784, 151.23094), type: "info", }, { position: new google.maps.LatLng(-33.91682, 151.23149), type: "info", }, { position: new google.maps.LatLng(-33.9179, 151.23463), type: "info", }, { position: new google.maps.LatLng(-33.91666, 151.23468), type: "info", }, { position: new google.maps.LatLng(-33.916988, 151.23364), type: "info", }, { position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), type: "parking", }, { position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), type: "parking", }, { position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), type: "parking", }, { position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), type: "parking", }, { position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), type: "parking", }, { position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), type: "parking", }, { position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), type: "parking", }, { position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), type: "library", }, ]; for (let i = 0; i < features.length; i++) { const iconImage = document.createElement("img"); iconImage.src = icons[features[i].type].icon; const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: features[i].position, content: iconImage, }); } } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Custom Markers</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
測試範例
自訂地圖標記
您可以變更預設的紅色標記圖示 ()
自訂圖片以下範例說明如何將
帶有自訂 PNG 的預設圖示。
// A marker with a with a URL pointing to a PNG. const beachFlagImg = document.createElement("img"); beachFlagImg.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"; const beachFlagMarkerView = new AdvancedMarkerElement({ map, position: { lat: 37.434, lng: -122.082 }, content: beachFlagImg, title: "A marker using a custom PNG Image", });
歡迎查看更多使用圖形建立標記的方法。
使用地圖項目自訂標記
校園地圖項目清單上的每個搜尋點都有 type
屬性。請留意下方的程式碼片段如何指定 parking
、library
和 info
類型。您可以根據所設定的地圖項目 type
自訂標記圖示。
const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/"; const icons: Record<string, { icon: string }> = { parking: { icon: iconBase + "parking_lot_maps.png", }, library: { icon: iconBase + "library_maps.png", }, info: { icon: iconBase + "info-i_maps.png", }, }; function addMarker(feature) { const iconImage = document.createElement("img"); iconImage.src = icons[feature.type].icon; const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: feature.position, content: iconImage, }) } addMarker(features[0]);