将默认标记颜色更改为紫色，但必须使用GoogleMapAPI javascript进行自定义标记聚类

ovfsdjhp 于 2023-02-28 发布在 Java

关注(0)|答案(1)|浏览(138)

我正在使用https://maps.google.com/maps/api/js?key=xxxxxx&libraries=drawing,places,marker&async=2&callback=MapPropertyShopLoaded的谷歌Map
以及https://unpkg.com/@googlemaps/markerclusterer@2.0.15/dist/index.min.js用于标记聚类
我使用以下代码创建标记和聚类

marker = new google.maps.Marker({
            position: new google.maps.LatLng(locationObject.Latitude, locationObject.Longitude),
            map: map,
          
            title: hotelName,
            id: hotelid
        });

 var renderer = {

    render: function (paramss)
    {
     return   new google.maps.Marker({
         label: { text: String(paramss.count), color: "white", fontSize: "10px" },
         position: paramss.position,
            // adjust zIndex to be above other markers
         zIndex: Number(google.maps.Marker.MAX_ZINDEX) +paramss.count
        });

    }
};
 markClusterobj = new markerClusterer.MarkerClusterer({ map: map, markers: markers, renderer: renderer});

我喜欢的方式与集群的工作，把多少标记下面。我被要求使所有的标记紫色现在。我希望标记的外观和感觉相同的红色只有紫色。我尝试过AdvancedMarkerView，但它不支持集群。我尝试下载图像，他们出来的低质量和奇数。任何想法，我如何才能实现上述只有紫色？

JavaScript

来源：https://stackoverflow.com/questions/75544872/change-default-marker-color-to-purple-but-must-use-custom-marker-clustering-usi

1条答案

按热度按时间

tzxcd3kk1#

决定使用我自己的自定义图像来显示标记颜色。使用seticon还使用将标记群集更改为不同的图像

var svg = window.btoa('<svg fill="#A020F0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><circle cx="120" cy="120" opacity=".6" r="70" /><circle cx="120" cy="120" opacity=".3" r="90" /><circle cx="120" cy="120" opacity=".2" r="110" /><circle cx="120" cy="120" opacity=".1" r="130" /></svg>');
var renderer = {

    render: function (paramss)
    {
     //return   new google.maps.Marker({
     //    label: { text: String(paramss.count), color: "white", fontSize: "10px" },
     //    position: paramss.position,
     //    icon: "https://googlemaps.github.io/js-marker-clusterer/images/m5.png",
     //       // adjust zIndex to be above other markers
     //    zIndex: Number(google.maps.Marker.MAX_ZINDEX) +paramss.count
     //});

        return new google.maps.Marker({
            position: paramss.position,
            icon: {
                url: 'data:image/svg+xml;base64,'+ svg,
                scaledSize: new google.maps.Size(45, 45),
            },
            label: {
                text: String(paramss.count),
                color: "rgba(255,255,255,0.9)",
                fontSize: "12px",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + paramss.count,
        });

    }
};

所以解决方案看起来更漂亮更优雅

赞(0）回复(0）举报 2023-02-28

我来回答

将默认标记颜色更改为紫色，但必须使用GoogleMapAPI javascript进行自定义标记聚类

1条答案

相关问题

热门标签

最新问答