Question

Google Maps API。我正在寻找显示简单点图标（具有可变颜色）的最佳方法，这些图标在缩放时不会调整大小。

相反，当缩放到某个级别时，简单的点图标会消失，并出现一个摘要图标，其中会显示每种颜色的数值。

我已经查看过标记图标，但是他们会在缩放时调整大小。澄清 - 标记根据实际纬度和经度测量值调整大小。它与地图屏幕尺寸的大小保持相同。

我正在寻找一种方法，让小点在纬度和经度方面保持相同的大小。我已经查看了圆圈类，并且在地图上看起来并不是完美的圆圈。他们有粗糙的边缘。

下面的图片

1.完全放大 2.缩小 - 圆圈与Lat和Lon保持相同的尺寸 3A。缩小 - 圆圈消失，“摘要圈”出现 3B。缩小 - 圆圈消失，热图出现

我试过新代码

public lookupAddresses: any;

Answer 1

我没有得到你的问题。但如果您正在寻找动态样式，这可能会对您有所帮助。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Google Maps</title>
<style type="text/css">
#map {
    height: 100%;
    width: 100%;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
    var map = null;
    var dataLayer = null;
    function init() {
        map = new google.maps.Map(document.getElementById('map'), {
            center : {
                lat : 12.931,
                lng : 77.59180
            },
            zoom : 1
        });
        map.addListener('zoom_changed', zoomChange, this);
        dataLayer = new google.maps.Data({
            map : map
        });
        dataLayer.setStyle(styleFunction);
        dataLayer.loadGeoJson('yourJsonFilePath.json');
    }
    function styleFunction(feature) {
        if (feature.getGeometry()) {
            var fillColor = null;
            var scale = null;
            switch (map.getZoom()) {
            case 0:
            case 1:
            case 2:
            case 3:
                fillColor = "#0000ff";
                scale = 40;
                break;
            case 4:
            case 5:
            case 6:
            case 7:
                fillColor = "#00ff00";
                scale = 30;
                break;
            case 8:
            case 9:
            case 10:
            case 11:
                fillColor = "#ff0000";
                scale = 20;
                break;
            case 12:
            case 13:
            case 14:
            case 15:
                fillColor = "#ff00ff";
                scale = 10;
                break;
            default:
                fillColor = "#ffff00";
                scale = 5;
            }
            return {
                icon : {
                    path : google.maps.SymbolPath.CIRCLE,
                    fillColor : fillColor,
                    fillOpacity : 1,
                    strokeWeight : 1,
                    strokeColor : fillColor,
                    scale : scale
                }
            }
        }
    }

    function zoomChange(event) {
        dataLayer.setStyle(styleFunction);
    }
</script>
<script
    src="https://maps.googleapis.com/maps/api/js?v=3.26&key=APIKey&callback=init"></script>

修改

在样式函数中，如果您在json数据中有以下内容，则可以从feature属性获取填充颜色而不是硬编码填充颜色

function styleFunction(feature) { if (feature.getGeometry()) { var fillColor = feature.getProperty("color"); var scale = null; switch (map.getZoom()) { case 0: case 1: case 2: case 3: scale = 40; break; case 4: case 5: case 6: case 7: scale = 30; break; case 8: case 9: case 10: case 11: scale = 20; break; case 12: case 13: case 14: case 15: scale = 10; break; default: scale = 5; } return { icon : { path : google.maps.SymbolPath.CIRCLE, fillColor : fillColor, fillOpacity : 1, strokeWeight : 1, strokeColor : fillColor, scale : scale } } } }

此处颜色是每个要素中的属性

显示点直到某个缩放级别，然后显示热图

1 个答案: