自定义 Google 地图：自定义标记

2024-02-16 06:50| 来源: 网络整理| 查看: 265

请选择平台： Android iOS JavaScript

概览

本教程介绍了如何更改 Google 地图标记的图标。使用本教程时，最好了解一下创建标记的基础知识。

注意：您可以使用 Google 地球/地图图标集内的标准和自定义标记图标。

以下地图示例展示的是使用自定义标记的地图。

下文列出了创建本教程中的地图所需的所有代码。

TypeScript let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: new google.maps.LatLng(-33.91722, 151.23064), zoom: 16, }); const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/"; const icons: Record = { 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", }, ]; // Create markers. for (let i = 0; i < features.length; i++) { const marker = new google.maps.Marker({ position: features[i].position, icon: icons[features[i].type].icon, map: map, }); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;index.ts 注意：请参阅 TypeScript 和 Google 地图的使用方法指南。 JavaScript let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(-33.91722, 151.23064), zoom: 16, }); 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", }, ]; // Create markers. for (let i = 0; i < features.length; i++) { const marker = new google.maps.Marker({ position: features[i].position, icon: icons[features[i].type].icon, map: map, }); } } window.initMap = initMap;index.js 注意：所示 JavaScript 代码是从 TypeScript 代码段编译而来的。 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; } style.css HTML Custom Markers index.html 试用示例 Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

自定义地图标记

下图显示的是使用默认红色图标的 Google 地图标记。您可以将该图标更改为您选择的图片。下表介绍了用于自定义默认标记以使用停车场图标的代码。

代码和说明 var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: iconBase + 'parking_lot_maps.png' }); 将 icon 属性添加到 MarkerOptions 对象，以更改标记的图标。 icon 属性可以是字符串（指向标记图标的网址），也可以是 Icon 对象。请看下面的自定义标记图标。

按地图项自定义标记

园区地图项列表中的每个地图注点都有一个 type 属性。请注意以下提取的代码如何指定 parking、library 和 info 类型。您可以自定义标记图标，具体取决于您将其设置成的地图项 type。

更多信息标记上的图片称为“图标”。标记也称为“图钉”。

【本文地址】

公司简介

联系我们