Question

我已经使用自定义标记实现（在VueJs 2中）谷歌地图。到目前为止，一切都按预期进行。

我遇到的问题是，当我在地图上拖动街景人并将其释放时，我的地图变成了灰色，并且在开发工具中出现了以下错误消息

这是我的Google地图代码/方法

showMap() {
    const initMap = gmapsInit();
    initMap.then((google) => {
        let myLatLng = {lat: this.latitude, lng: this.longitude};
        let map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: myLatLng
        });

        let contentString = '<div id="content">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading">' + this.locationTranslations.name + '</h1>' +
            '<div id="bodyContent">' +
            '<p>' + this.description + '</p>' +
            '</div>' +
            '</div>';

        let infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        let icon = {
            url: '/static/img/map-pin.svg',
            scaledSize: new google.maps.Size(30, 30),
        };

        let marker = new google.maps.Marker({
            position: myLatLng,
            icon: icon,
            map: map,
            title: this.locationTranslations.name
        });
        marker.addListener('click', function () {
            infowindow.open(map, marker);
        });

        countryService.getClientLocation()
            .then((response) => {
                let locationCoordinates = response.data.loc.split(",");
                this.userLocation.lat = parseFloat(locationCoordinates[0]);
                this.userLocation.lng = parseFloat(locationCoordinates[1]);

                let directionsService = new google.maps.DirectionsService;
                let directionsDisplay = new google.maps.DirectionsRenderer;
                directionsDisplay.setMap(map);
                directionsService.route({
                    origin: myLatLng,
                    destination: this.userLocation,
                    travelMode: 'DRIVING'
                }, function (response, status) {
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                    } else {
                        this.$snotify.warning(
                            'Please allow location tracking, so we can show you directions to location',
                            this.$t('warn')
                        );
                    }
                });

            })


    }).catch((e) => {
        console.log(e);
    });
},

有人可以帮我吗，我想念什么或做错了什么，以便我的地图能够显示街景？如果您需要任何其他信息，请告诉我，我会提供。谢谢！

Answer 1

您似乎已受到Maps Javascript API版本转换的影响，我建议您使用3.34版作为解决方法，可以通过在Maps Javascript API脚本标记中添加v参数来实现此目的，可能会看到以下示例：

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.34&callback=initMap">
</script>

Google地图街景为灰色（抛出错误b.hasAttribute不是函数）

1 个答案: