Vue集成Google Places API后地图无法显示问题求助

问题背景 #

严格按操作步骤执行后，页面右侧的Google API地图仍无法显示，已在script标签配置API密钥（代码中用占位符代替）。相关代码如下：

HTML代码 #

<div class="ten wide column segment ui m-0" ref="map"></div>

Vue Methods代码 #

methods: {
    locatorButtonPressed() {
        navigator.geolocation.getCurrentPosition(
            position => {
                this.lat = position.coords.latitude;
                this.lng = position.coords.longitude;
            },
            error => {
                console.log("Error getting location");
            }
        );
    },

    findCloseByButtonPressed() {
        const URL = `https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/nearbysearch/json?
                            location=${this.lat},${this.lng}
                            &type=${this.type}
                            &radius=${this.radius * 1000}
                            &key=`[KEY HERE]`;

        axios
            .get(URL)
            .then(response => {
                this.places = response.data.results;
                this.addLocationsToGoogleMaps();
            })
            .catch(error => {
            console.log(error.message);
        });
    },

    addLocationsToGoogleMaps() {
        var map = new google.maps.Map(this.$refs['map'], {
            zoom: 15,
            center: new google.maps.LatLng(this.lat, this.lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

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

        this.places.forEach(place => {
            const lat = place.geometry.location.lat;
            const lng = place.geometry.location.lng;

            let marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map
            });

            google.maps.event.addListener(marker, "click", () => {
                infowindow.setContent(
                    `<div class="ui header">${place.name}</div><p>${place.vicinity}</p>`
                );
                infowindow.open(map, marker);
            });
        });
    }
}

可能的问题与修复方法 #

1. 地图容器缺少宽高样式 #

Google地图渲染依赖容器的明确尺寸，检查CSS是否为ref="map"的div设置了宽高：

.ui.segment.m-0.ten.wide.column {
    width: 100%;
    height: 400px; /* 根据需求调整高度 */
}

无尺寸的容器会导致地图无法正常显示。

2. API密钥配置与权限问题 #

• 确认代码中[KEY HERE]已替换为实际的API密钥，且无拼写错误。
• 登录Google Cloud控制台，确保密钥已启用Maps JavaScript API和Places API两个服务。
• 检查密钥的使用限制（如IP、域名白名单），确保当前页面的访问环境在允许范围内。

3. URL拼接语法错误 #

findCloseByButtonPressed方法中模板字符串闭合错误，修正为：

const URL = `https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/nearbysearch/json?
                            location=${this.lat},${this.lng}
                            &type=${this.type}
                            &radius=${this.radius * 1000}
                            &key=[KEY HERE]`;

将API密钥放在模板字符串内部。

4. 经纬度获取失败导致地图初始化异常 #

若用户拒绝定位权限，this.lat和this.lng会为undefined，导致地图center参数无效。在addLocationsToGoogleMaps中增加判断：

addLocationsToGoogleMaps() {
    if (!this.lat || !this.lng) {
        console.log("缺少有效经纬度");
        return;
    }
    // 后续地图初始化代码...
}

同时优化定位失败的日志：

error => {
    console.log("获取位置失败:", error.message);
}

5. Google Maps脚本加载问题 #

确保页面中正确加载Google Maps脚本，且顺序在Vue代码之前：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>

必须包含libraries=places参数，否则无法使用Places API相关功能。

内容的提问来源于stack exchange，提问作者ganbare bare