Question

我的JSON数据显示了我想要的等值区域图和三组标记。我正在关注W3Schools Google Map Events tutorial。我没有在控制台中抛出任何错误，所以我认为语法可能没问题，但不是我提供的。

我做错了什么？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Maryland Prisoner Map</title>
    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!--Google Maps API-->
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <!--Stamen Basemaps-->
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
    <!--CSS-->
    <link href="style.css" rel="stylesheet" type="text/css">
    <!--JavaScript-->
    <script src="script.js" type="text/javascript"></script>
</head>
<body class="page-wrap">
        <h1 id="header">Maryland Prisoner Map</h1>
        <p></p>
        <div id="map"></div>
</body>
</html>

CSS：

#header {
    text-align: center;
}

#map {
    height: 450px;
    width: 80%;
    margin: 0 auto;
    border: 1px solid black;
    box-shadow: 2px 2px 1px 2px gray;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}

JavaScript的：

    $(document).ready(function() {
        var layer = "toner-lite";
        var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(39.290385, -76.612189),
            zoom: 10,
            mapTypeId: layer,
            mapTypeControlOptions: {
                mapTypeIds: [layer, google.maps.MapTypeId.HYBRID]
            }
        });
        map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
        //load data into map
        var localLayer = new google.maps.Data();
        localLayer.loadGeoJson('JSON/local.geojson');
        localLayer.setMap(map);

        var localInfoWindow = new google.maps.InfoWindow({
            content: "I am a local level jail or prison"
        });

        google.maps.event.addListener(localLayer, 'click', function(){
            localInfoWindow.open(map, localLayer);
        });

        var stateLayer = new google.maps.Data();
        stateLayer.loadGeoJson('JSON/state.geojson');
        stateLayer.setMap(map);

        var stateInfoWindow = new google.maps.InfoWindow({
            content: "I am a state level jail or prison"
        });

        google.maps.event.addListener(stateLayer, 'click', function(){
            stateInfoWindow.open(map, stateLayer);
        });

        var federalLayer = new google.maps.Data();
        federalLayer.loadGeoJson('JSON/federal.geojson');
        federalLayer.setMap(map);

        var federalInfoWindow = new google.maps.InfoWindow({
            content: "I am a federal level jail or prison"
        });

        google.maps.event.addListener(federalLayer, 'click', function(){
            federalInfoWindow.open(map, federalLayer);
        })


        var marylandLayer = new google.maps.Data();
        marylandLayer.loadGeoJson('JSON/maryland.geojson');
        //give the map style
        marylandLayer.setStyle(function(feature) {
            return {
                fillColor: getColor(feature.getProperty('Difference')), // call function to get color for state based on the COLI (Cost of Living Index)
                fillOpacity: 0.9,
                strokeColor: '#FFFFFF',
                strokeWeight: 1,
                zIndex: 1
            };
        });
        //set layer to map
        marylandLayer.setMap(map)
        //get some color
        function getColor(Difference) {
        return Difference >= 94 ? '#b10026' :
               Difference > 76 ? '#e31a1c' :
               Difference > 58 ? '#fc4e2a' :
               Difference > 38 ? '#fd8d3c' :
               Difference > 20 ? '#feb24c' :
               Difference > 7 ? '#fed976' :
               Difference > 1 ? '#ffffb2' :
               Difference > -1 ? '#FFFFFF' :
               '#000000';
        };

    // Add mouseover and mouse out styling for the GeoJSON Maryland data
    marylandLayer.addListener('mouseover', function(e) {
        marylandLayer.overrideStyle(e.feature, {
            strokeColor: '#2a2a2a',
            strokeWeight: 2,
            zIndex: 2
        });
    });
    marylandLayer.addListener('mouseout', function(e) {
        marylandLayer.revertStyle();
    });

    var polygonInfoWindow = new google.maps.InfoWindow({
        content: "I am a polygon"
    });
    google.maps.event.addListener(marylandLayer, 'click', function(){
        polygonInfoWindow.open(map, marylandLayer);
    });
});

Answer 1

点击标记时，您需要定位InfoWindow。您可以在单击处理程序

中执行此操作

google.maps.event.addListener(localLayer, 'click', function(event){
    localInfoWindow.setPosition(event.feature.getGeometry().get());
    localInfoWindow.open(map, localLayer);
});

这同样适用于其他层。

来自json的信息窗口无法打开

1 个答案: