Google maps api 3 显示点，直到特定的缩放级别，然后显示热图

谷歌地图API。 我正在寻找最好的方式来显示简单的点图标（颜色可变），不调整缩放

相反，当缩放到某个级别时，简单的点图标消失，并显示一个摘要图标，每个颜色都有一个数值

我查看了标记图标，但它们会随着缩放而调整大小。

---

澄清-标记根据实际纬度和经度测量值调整大小。相对于地图屏幕大小，其大小保持不变

我正在寻找一种方法，使小点在经纬度上保持相同的大小。我已经研究了circle类，那些在地图上似乎不是完美的圆。它们有粗糙的边缘

下图

1.一路放大 2.缩小-圆圈相对于Lat和Lon保持相同大小 3a。缩小-圆圈消失，“摘要圆圈”出现 3b。缩小-圆圈消失，热图出现

我试过的新代码

    <script type="text/javascript">
    var map = null;
    var spotsArray = [];

    window.onload = initialize();

    function initialize() {
        map = new google.maps.Map(document.getElementById("map-canvas")
            , {
                mapTypeId: google.maps.MapTypeId.roadmap
            , zoom: @Model.StartingZoom
            , disableDefaultUI: true
            , zoomControl: true
            , center: new google.maps.LatLng(@Model.StartingLocation)
            });

        map.addListener('zoom_changed', zoomChange, this);
        dataLayer = new google.maps.Data({
            map: map
        });

        window.setInterval(function () { UpdateData() }, 5000);
    }

    function getScaleSize() {
        var scale = null;
        var mapZoom = map.getZoom();
        switch (mapZoom) {
            case 15:
            case 16:
            case 17:
                scale = 1;
                break;
            case 18: 
                scale = 10;
                break;
            case 19:
            case 20:
            case 21:
            case 22:
                scale = 20;
                break;
            default:
                scale = 0;
        }
        return scale;
    }

        function zoomChange() {
            for (var nIndex = 0; nIndex < spotsArray.length; nIndex++) {
                var Spot = spotsArray[nIndex].Spot;
                var Scale = getScaleSize();
                Spot.icon.scale = Scale;
            }
    }

    function UpdateData() {
        GetJsonData('@Url.Action("GetMapData")'
            ,{}
            ,function(jsonData)
        {
            $(jsonData).each(function (item)
            { AddUpdateSpotOnMap(jsonData[item]) });
        });
        };

    function AddUpdateSpotOnMap(SpotData) {
        //SpotID, Latitude, Longitude, StrokeColor, StrokeOpacity, StrokeWeight, FillColor, FillOpacity

        //Check if in Array
        var inArrayIndex = NaN;
        for (var nIndex = 0; nIndex < spotsArray.length; nIndex++) {
            if (SpotData.spotID == spotsArray[nIndex].SpotID) {
                inArrayIndex = nIndex;
                break;
            }
        }
        if (isNaN(inArrayIndex) == false) {
            //Update Color
            spotsArray[inArrayIndex].Spot.setOptions({ StrokeColor: SpotData.strokeColor, StrokeOpacity: SpotData.strokeOpacity, StrokeWeight: SpotData.strokeWeight, FillColor: SpotData.fillColor, FillOpacity: SpotData.fillOpacity });
        }
        else {

            var Spot = new google.maps.Marker(
                        {
                            position: new google.maps.LatLng(SpotData.latitude, SpotData.longitude),
                            map: map,
                            title: SpotData.hoverOver,
                            icon: {
                                path: google.maps.SymbolPath.CIRCLE,
                                strokeColor: SpotData.strokeColor,
                                strokeOpacity: SpotData.strokeOpacity,
                                strokeWeight: SpotData.strokeWeight,
                                fillColor: SpotData.fillColor,
                                fillOpacity: SpotData.fillOpacity,
                                scale: 5 }
        });
            spotsArray.push({ SpotID: SpotData.spotID, Spot: Spot });
            dataLayer.add(Spot);
        }
    };
</script>

var-map=null；
var spotsArray=[]；
window.onload=初始化（）；
函数初始化（）{
map=新的google.maps.map（document.getElementById（“地图画布”）
, {
mapTypeId:google.maps.mapTypeId.roadmap
，zoom:@Model.StartingZoom
，disableDefaultUI:true
，zoomControl:true
，中心：new google.maps.LatLng（@Model.StartingLocation）
});
addListener（'zoom_change'，zoomChange，this）；
dataLayer=新的google.maps.Data({
地图：地图
});
setInterval（函数（）{UpdateData（）}，5000）；
}
函数getScaleSize（）{
var刻度=零；
var mapZoom=map.getZoom（）；
开关（地图缩放）{
案例15：
案例16：
案例17：
比例=1；
打破
案例18：
比例=10；
打破
案例19：
案例20：
案例21：
案例22：
比例=20；
打破
违约：
比例=0；
}
回报率；
}
函数zoomChange（）{
对于（var nIndex=0；nIndex

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

<!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>

---

这里，颜色是每个特征中的属性

标记的作用与您所说的完全相反。它不会随地图调整大小，也就是说，无论使用何种缩放级别，它的大小始终相同。如果这不是您想要的，您可以使用。来澄清-标记根据实际的纬度和经度测量值调整大小。相对于地图屏幕大小，其大小保持不变。我正在寻找一种方法，使小点在经纬度上保持相同的大小。我已经研究了circle类，这些类在地图上似乎不是圆。你的问题太宽泛了。你需要展示你尝试过的东西，发布你的代码，把你的问题缩小到一个问题<代码>圆圈可能是一条出路<代码>标记也是。或者两者兼而有之。标记图标可以调整大小。您可能需要一个新的解决方案。为什么不呢。这些想法应该足以帮助您开始。谢谢，我正在寻找一些建议来开始。我试图用圆来做这件事，但是当你仔细观察近距离的缩放时，它们看起来并不是圆。当我得到编码后，我将发布一些带有标记的实现代码。谢谢你的指导。我将选择一个带有圆圈图标的标记。谢谢你的建议。我会调查这件事，然后再打给你。你看，也许会给你一些提示。如果你感兴趣

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
            }
        }
    }
}