有没有办法添加 DOM 元素作为 google map js api 的标记

Question

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

我正在尝试做什么

Marker Image

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

Answer 1

这是我在 google 上找到的解决方案之一。 Fredik标题的方法。它使用 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;
    }

});

Answer 2

使用.svg

最多使用动态 shape/color/textContent 个性化自定义标记...您可以在 javascript 中绘制 .svg 对象（参见 this or 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 canvas（请参阅来自 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);                   
});