我能夠找到一個帶有“RichMarker.js”的存檔庫，它解決了我的問題，但有沒有新的或更好的解決方案來解決這個問題。
我想要做什么
標記影像
單擊時，我需要為每個半圓顯示不同型別的資訊框，并且標記中的資料是動態的。任何幫助，將不勝感激。
uj5u.com熱心網友回復：
利用 .svg
最好使用動態形狀/顏色/文本內容來個性化自定義標記...您可以.svg在 javascript 中繪制物件（參見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中的這篇文章）
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);
});
uj5u.com熱心網友回復：
這是我能夠在谷歌上挖掘出來的解決方案之一。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;
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/415408.html
標籤：