Javascript 从谷歌地图自动完成检索城市名称时出错

在自动完成谷歌地图的“地点改变”事件中，我很难检索城市名称

问题是我正在使用javascript加载地图和自动建议

我必须使用从谷歌地图组件中选择的城市，并在javascript的typescript文件中使用它

我可以将maps.js中的函数用于typescript组件，但无法检索城市名称，因为更改的事件不会触发整个函数

Maps.js

function initMap(coords) {
    var city = '';
    var map = new google.maps.Map(document.getElementById('map'), {
        center: coords,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });
    var marker = new google.maps.Marker({
        position: coords,
        map: map,
        zoom: 10,
    });

    var input = document.getElementById('city');

    var autocomplete = new google.maps.places.Autocomplete(input);

    // Bind the map's bounds (viewport) property to the autocomplete object,
    // so that the autocomplete requests use the current map bounds for the
    // bounds option in the request.
    autocomplete.bindTo('bounds', map);

    // Set the data fields to return when the user selects a place.
    autocomplete.setFields(
        ['address_components', 'geometry', 'icon', 'name']);

    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);

    autocomplete.addListener('place_changed', function () {
        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();

        if (!place.geometry) {
            // User entered the name of a Place that was not suggested and
            // pressed the Enter key, or the Place Details request failed.
            window.alert("No details available for input: '" + place.name + "'");
            return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17); // Why 17? Because it looks good.
        }
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);

        var address = '';
        if (place.address_components) {
            address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
        }

        infowindowContent.children['place-name'].textContent = place.name;
        infowindow.open(map, marker);
    });
}

city.component.html

<div>
  <input id="city" type="text" class="form-control mr-5" placeholder="Enter a location" value="">
</div>
<div id="map"></div>
<div id="infowindow-content">
  <span id="place-name" class="title"></span>
  <span id="place-address"></span>
</div>

我需要create-events.ts上的城市名称保存到数据库中。因此结构为：

首先加载create-events.page.ts，其中包含一个

，单击该按钮可加载city.components.ts

然后city.component.ts调用位于maps.js中的函数initMap（）

---

如果可能的话，我需要将城市名称从maps.js检索到create-events.ts页面。

显示的html代码不是event-create.html，而是city.component.html，很抱歉键入错误。您在这里使用了很多传统javascript技术，这可能会导致问题。Angular/Ionic对html做了很多工作，所以普通的示例并不总是有效。这些部分是使用web组件构建的，这些组件封装并更改周围的结构。首先，我建议调查一下，我已经调查过了，但是没有提供自动完成的谷歌地图搜索。此外，我曾尝试在city.component.ts中编写代码，但没有创建maps.js并将js导入到ionic项目中，但由于typescript的原因，我遇到了一些未定义的函数。因此，我找到了在ionic项目中创建maps.js并导入并加载地图的唯一解决方案，用于自动完成搜索。