[英]Is there a way to add DOM element as marker for google map js api
I was able to find an archived library with "RichMarker.js" which solves my problem but is there any new or better solution to this problem.我能够找到一个带有“RichMarker.js”的存档库,它解决了我的问题,但有没有新的或更好的解决方案来解决这个问题。
What I am trying to do我想要做什么
I need to display different type of info boxes for each of the semi-circle when clicked and the data in the marker is dynamic.单击时,我需要为每个半圆显示不同类型的信息框,并且标记中的数据是动态的。 Any help would be appreciated.
任何帮助,将不胜感激。
.svg
.svg
To personalize at best custom markers with dynamic shape/color/textContent... you can draw .svg
object in javascript (see this or this ).要使用动态形状/颜色/文本内容来个性化最好的自定义标记...您可以在 javascript 中绘制
.svg
object(请参阅此或此)。
After, you just need to set it like an image之后,您只需将其设置为图像
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
});
You can update your image at anytime by doing您可以通过以下方式随时更新您的图像
newIconForMarker = {url: newIconSvg, size:new google.maps.Size(20, 20)};
marker.setOptions({'icon':newIconForMarker });
canvas
canvas
You can also use 2d canvas (see this post from stackexchange)您还可以使用 2d canvas(请参阅 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);
});
This is one of the solutions I was able to dig out on google.这是我能够在谷歌上挖掘出来的解决方案之一。 Fredik title's approach.
Fredik title 的方法。 It uses jQuery, but I think your could rewrite it as js
它使用 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;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.