Question

我正在尝试从geojson文件中放置标记，并允许它们可点击以获取更多信息（infowindow）。

这是我的代码

<script>
var map, infoWindow, trafficLayer;

function toggleTraffic(){
    if(trafficLayer.getMap() == null){
        //traffic layer is disabled.. enable it
        trafficLayer.setMap(map);
    } else {
        //traffic layer is enabled.. disable it
        trafficLayer.setMap(null);             
    }
}

function initMap() {

function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'mapdark.json', true);
    xobj.onreadystatechange = function() {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

var loaded_json

var infowindow = new google.maps.InfoWindow({ });

loadJSON(function(response) {
    loaded_json = JSON.parse(response);

    var styledMapType = new google.maps.StyledMapType(loaded_json, {
        name: 'Map'
    });

    var h=get_cookie('pos');
    if (h) {
        h=h.split(',');
        var lat=parseFloat(h[0]);
        var lng=parseFloat(h[1]);
        var zoom=parseInt(h[2]);
    } else {
        var lat=40;
        var lng=15;
        var zoom=7;
    }

    var map = new google.maps.Map(document.getElementById('map'),{center:{lat:lat,lng:lng},zoom:zoom,gestureHandling:'greedy'});

    infoWindow = new google.maps.InfoWindow;

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    map.data.loadGeoJson('../json/geo.php', null, function (features) {
        var markers = features.map(function(feature) {
            var g = feature.getGeometry();
            var iconurl = feature.getProperty('icon');
            var marker = new google.maps.Marker({ 
              'position': g.get(0) ,
              'icon': iconurl
            });
            return marker;
        });

        var markerCluster = new MarkerClusterer(map, markers,{ imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' });    

    });

    map.data.addListener('click', function(event) {
        var title = event.feature.getProperty("title");
        var address = event.feature.getProperty("address");
        var contentString = '<div style="width: 94.2%; padding-left:10px; height: 25px;float: left;color: #FFF;background: #0b3061;font-size: 16px;line-height: 25px;border-radius:5px 5px 0px 0px;"><strong><b>' + title + '</b></strong><br></div><br><div><p align="left"><b>Address: </b>' + address + '<br></div>';

        infoWindow.setContent(contentString);

        infowindow.setPosition(event.feature.getGeometry().get());

        infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});

        infoWindow.open(map, anchor);

        map.setCenter(featurePosition); 

        console.log('test'); 
    });

    map.data.setStyle(function (feature) { return { icon: feature.getProperty('icon'), visible: false }; });

    map.mapTypes.set('styled_map', styledMapType);

    map.setMapTypeId('styled_map');

    //console.log(loaded_json)
    });

    function get_cookie(cname) {
        var name=cname+"=";
        var ca=document.cookie.split(';');
        for(var i=0;i<ca.length;i++) {
            var c=ca[i];
            while (c.charAt(0)==' ') {
                c=c.substring(1);
            }
            if (c.indexOf(name)==0) {
                return c.substring(name.length,c.length);
            }
        }
        return '';
    }  

}
</script>

我还尝试了marker.addListener('click', function(event)而不是map.data.addListener('click', function(event) ，但 console.log('test');也没有在日志中显示。不幸的是，我没有收到错误（也没有点击），大多数在线示例都在内部显示了geojson。

集群，标记，风格和定位都有效。

成功展示infowindow我错过了什么？

Answer 1

不确定为什么它不能用于您的情况，但要使标记可点击，您可以将click事件处理程序添加到Marker对象，如下所示：

var markers = features.map(function(feature) {
        var g = feature.getGeometry();
        var iconurl = feature.getProperty('icon');
        var marker = new google.maps.Marker({ 
          'position': g.get(0) ,
          'icon': iconurl
        });

        marker.addListener('click', function (event) {
            infowindow.setContent("Marker");
            infowindow.open(map, marker);
        }); 


        return marker;
    });

演示

＆＃13;

function initMap() {

    var dataUrl = "https://storage.googleapis.com/mapsdevsite/json/google.json";

    var infowindow = new google.maps.InfoWindow({});

    var map = new google.maps.Map(document.getElementById('map'), { center: { lat: -28, lng: 137 }, zoom: 4, gestureHandling: 'greedy' });
    google.maps.event.addListener(map, 'click', function () {
        infowindow.close();
    });

    map.data.loadGeoJson(dataUrl, null, function (features) {
        var markers = [];
        features.forEach(function (feature) {
            var coordinates = feature.getGeometry().getAt(0);
            var iconurl = feature.getProperty('icon');


            coordinates.forEachLatLng(function (latLng) {
                var marker = new google.maps.Marker({
                    'position': latLng,
                    'icon': iconurl
                });

                marker.addListener('click', function (event) {
                    infowindow.setContent("Marker");
                    infowindow.open(map, marker);
                });


                markers.push(marker);
            });
        });

        var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' });

    });

}


google.maps.event.addDomListener(window, 'load', initMap);

＆＃13;

 #map {
      width: 100%;
      height: 640px;
    }

＆＃13;

<script src="https://maps.google.com/maps/api/js"></script>
  <script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
  
  <div id="map"></div>

＆＃13;

如果是群集标记，要在点击标记后显示信息窗口，请附上clusterclick事件处理程序，如下所示：

 var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m',zoomOnClick: false });


  google.maps.event.addListener(markerCluster, 'clusterclick', function (cluster) {
        infowindow.setPosition(cluster.getCenter());
        infowindow.setContent("Cluster marker");
        infowindow.open(map);
  });

无法点击Google地图geojson标记群集获取信息

1 个答案: