Question

我正在尝试将简单的谷歌地图实施到网站中。我成功从数据库中检索每个位置的坐标存储，并使用addGeoJson成功将它们写入地图。

我的问题是当您点击每个位置标记时没有出现文字。我无法通过搜索找到这个问题所以我把它带到这里！

我的谷歌放置了javascript：

    function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 38.789763, lng: -89.991966},
        zoom: 13,
        mapTypeId: 'roadmap',
        styles: mapStyle
    });
//load coordinates of restaurants from db
    $.get('/getPlaces', function (data) {
        placesJSON = {"type": "FeatureCollection", "features": [], "type": "FeatureCollection"};
        places = jQuery.parseJSON(data);
        for (var i = 0; i < places.length; i++) {
            placesJSON.features.push({"type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [Number(places[i].lng), Number(places[i].lat)]
                },
                "properties": {
                    "title": "Lincoln Park",
                    "description": "A northside park that is home to the Lincoln Park Zoo"
                },
            });
        }
        console.log(placesJSON);
        map.data.addGeoJson(placesJSON);
    })
            .fail(function (xhr, textStatus, errorThrown) {
                alert(errorThrown);
            });
    infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            infoWindow.setPosition(pos);
            map.setCenter(pos);
        }, function () {
            handleLocationError(true, infoWindow, map.getCenter());
        });
    } else {
// Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
    }
// Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
// Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function () {
        searchBox.setBounds(map.getBounds());
    });

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
    var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
    searchBox.addListener('places_changed', function () {
        var places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }

        // Clear out the old markers.
        markers.forEach(function (marker) {
            marker.setMap(null);
        });
        markers = [];
        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function (place) {
            console.log(place);
            if (!place.geometry) {
                console.log("Returned place contains no geometry");
                return;
            }
            var icon = {
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(25, 25)
            };
            // Create a marker for each place.
            markers.push(new google.maps.Marker({
                map: map,
                icon: icon,
                title: place.name,
                position: place.geometry.location
            }));
            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            } else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);
    });
}

请注意我为每个项目添加了将重复的占位符文本。这仅用于测试目的。

Answer 1

我在另一篇文章中找到了解决方案：

map.data.addListener('click', function (event) {
    infoWindow.setContent(event.feature.getProperty('name') + "<br>" + event.feature.getProperty('description'));
    infoWindow.setPosition(event.latLng);
    infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -34)});
    infoWindow.open(map);
});

谷歌地图api geoJSON - 没有出现描述框

1 个答案: