【问题标题】：Is there a way to add DOM element as marker for google map js api有没有办法添加 DOM 元素作为谷歌地图 js api 的标记
【发布时间】：2022-01-12 07:40:10
【问题描述】：

我能够找到一个带有“RichMarker.js”的存档库，它解决了我的问题，但有什么新的或更好的解决方案来解决这个问题。

我要做什么

Marker Image

单击时，我需要为每个半圆显示不同类型的信息框，并且标记中的数据是动态的。任何帮助将不胜感激。

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

使用`.svg`

最好使用动态形状/颜色/文本内容来个性化自定义标记...您可以在 javascript 中绘制.svg 对象（请参阅this 或this）。

之后，你只需要像图片一样设置它

iconForMarker = {url: iconSvg, size:new google.maps.Size(20, 20)};
let marker = new google.maps.Marker({
    position: latLng,
    map: gMap,
    icon: iconForMarker,
    // optimized false only if you have 200 or more markers  
    optimized: false
 });

您可以随时更新您的图像

newIconForMarker = {url: newIconSvg, size:new google.maps.Size(20, 20)};
marker.setOptions({'icon':newIconForMarker });

使用`canvas`

您还可以使用 2d 画布（参见 stackexchange 中的 this post）

let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
context.canvas.width = 38 * scale;
context.canvas.height = 46 * scale;
let sources = {
    pin: createPin(colorPin, scale),
    photo: dataPhoto                
};
loadImages(sources, function(images) {
    context.drawImage(images.pin, 0, 0);
    context.drawImage(images.photo, 5 * scale, 3 * scale);
    // creating a marker
    let marker = new google.maps.Marker({
        position: latlng,
        map: null,
        icon: canvas.toDataURL()
    });
    callback(marker);                   
});

【讨论】：

【解决方案2】：

这是我在谷歌上找到的解决方案之一。 Fredik title 的方法。它使用 jQuery，但我认为您可以将其重写为 js

google.maps.event.addListener(marker, 'mouseover', function() {

    if (!this.hovercardInitialized) {

        var markerInDOM = $('div[title="' + this.title + '"]').get(0);

        // do whatever you want with the DOM element

        this.hovercardInitialized = true;
    }

});

【讨论】：

使用.svg

使用canvas

使用`.svg`

使用`canvas`