JavaScript：显示带有动态数据的交互式地图

我正在尝试使用谷歌地图API来显示带有动态数据的交互式地图。但是，我不知道如何在代码中设置它

在我的网站上，我有一个卡片列表，我想这样做，当点击每张卡片中的某个特定元素时，就会根据卡片上的位置数据显示一张交互式地图

我的代码如下所示：

卡片列表

HTML

${result.rows[x].reporterName}
${moment（新日期（parseInt（result.rows[x].datetime））.toDatetimeLocal（'unformatted'）.toString（），'YYYYMMDDhhmmss'）.fromNow（）}
卧室：${result.rows[x].卧室}

家具类型：${result.rows[x].furnitureTypes==='''None'：result.rows[x].furnitureTypes}

位置：${result.rows[x].propertyLocation===''？“无位置”：result.rows[x].propertyLocation}
月租金价格：$${parseFloat（result.rows[x].monthlyRentPrice）}

在上面的HTML中，我在位置图标上有一个onclick侦听器，这是函数：

JS

onLocationClicked=地址=>{
让lat，液化天然气；
轴心柱(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${API\u key}`）。然后（response=>{
lat=response.data.results[0].geometry.location.lat；
lng=response.data.results[0].geometry.location.lng；
document.getElementsByClassName（'modal-title'）[0]。textContent='Location'；
document.getElementsByClassName（'modal-body'）[0].innerHTML=''；
document.getElementsByClassName（'modal-body'）[0]。insertAdjacentHTML(
"之前",，
``
);
切换显示（'delete-note-btn'，'id'）；
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat，lng}，
缩放：8
});
document.getElementById（'modal-close'）。textContent='close'；
toggleldisplay（'modal-close'，'id'，null，true）；
$（'myModal'）.modal（'show'）；
document.getElementById（'modal-close'）。addEventListener（'click'，（）=>{
document.getElementsByClassName（'modal-body'）[0].innerHTML=''；
});
}).catch（error=>console.error（error））；
};

我的问题是，由于GoogleMapsAPI的工作方式，它需要一个

initMap

函数或需要全局定义的初始值设定项。但是，在我的代码中，这种设置对我来说不起作用，因为在单击位置图标之前，没有可用的地址，因此无法将地址填充到地图中

我不知道我是否能解释清楚，但我希望我的问题不会令人困惑

---

请问，我如何处理或解决这个问题。感谢您的帮助。提前感谢。

通过全局创建

initMap

函数，并使用虚拟位置数据设置地图，我能够解决这个问题

然后，当单击位置图标时，我将地图的位置数据更改为相应的位置数据，然后显示地图

所以我的JS现在看起来像这样：

initMap=（）=>{
让myLatlng=new google.maps.LatLng（-25.363882131.044922）；
让mapOptions={zoom:10，center:myLatlng}；
map=new google.maps.map（document.getElementById（'rough-map'），mapOptions）；
让marker=new google.maps.marker({
职位：myLatlng，
标题：“随机位置”
});
marker.setMap（map）；
切换显示（'rough-map'，'id'）；
};
onLocationClicked=地址=>{
让lat，液化天然气；
轴心柱(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${API\u key}`）。然后（response=>{
lat=response.data.results[0].geometry.location.lat；
lng=response.data.results[0].geometry.location.lng；
document.getElementsByClassName（'modal-title'）[0]。textContent='Location'；
document.getElementsByClassName（'modal-body'）[0].innerHTML=''；
document.getElementsByClassName（'modal-body'）[0]。insertAdjacentHTML(
"之前",，
``
);
切换显示（'delete-note-btn'，'id'）；
让myLatlng=new google.maps.LatLng（lat，lng）；
让mapOptions={zoom:15，center:myLatlng}；
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
让marker=new google.maps.marker（{position:mylatng，title:address}）；
marker.setMap（map）；
document.getElementById（'modal-close'）。textContent='close'；
toggleldisplay（'modal-close'，'id'，null，true）；
$（'myModal'）.modal（'show'）；
document.getElementById（'modal-close'）。addEventListener（'click'，（）=>{
document.getElementsByClassName（'modal-body'）[0].innerHTML=''；
});
}).catch（error=>console.error（error））；
};

你填写api密钥了吗？是的，我把它藏在这里了

<div class="list-group ${type}-item" id="${result.rows[x].id}" onclick="propertyClicked(window.event, ${result.rows[x].id});">
  <a class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">${result.rows[x].reporterName}</h5>
      <small>${moment(new Date(parseInt(result.rows[x].datetime)).toDatetimeLocal('unformatted').toString(), 'YYYYMMDDhhmmss').fromNow()}</small>
    </div>
    <p class="mb-1">Bedrooms: ${result.rows[x].bedrooms}</p>
    <p class="mb-1">Furniture Types: ${result.rows[x].furnitureTypes === '' ? 'None' : result.rows[x].furnitureTypes}</p>
    <p class="mb-1">Location: ${result.rows[x].propertyLocation === '' ? 'No Location' : result.rows[x].propertyLocation}</p>
    <div class="d-flex w-100 justify-content-between">
      <p class="mb-1">Monthly Rent Price: $${parseFloat(result.rows[x].monthlyRentPrice)}</p>
      <div>
        <ion-icon name="pin" class="mr-4 purple note-icon" id="note-location" onclick="onLocationClicked('${result.rows[x].propertyLocation}');"></ion-icon>
        <ion-icon name="create" class="mr-4 purple note-icon" id="edit-note" onclick="onEditClicked(${result.rows[x].id});"></ion-icon>
        <ion-icon name="trash" class="note-icon purple" id="delete-note" onclick="onDeleteClicked(${result.rows[x].id}, '${type}');"></ion-icon>
      </div>
    </div>
  </a>
</div>

onLocationClicked = address => {
    let lat, lng;
    axios.post(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${API_KEY}`).then(response => {
        lat = response.data.results[0].geometry.location.lat;
        lng = response.data.results[0].geometry.location.lng;
        document.getElementsByClassName('modal-title')[0].textContent = 'Location';
        document.getElementsByClassName('modal-body')[0].innerHTML = '';
        document.getElementsByClassName('modal-body')[0].insertAdjacentHTML(
            'beforeend',
            `<div id='map' style='height:100%'></div>`
        );
        toggleElDisplay('delete-note-btn', 'id');
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat, lng},
            zoom: 8
        });
        document.getElementById('modal-close').textContent = 'Close';
        toggleElDisplay('modal-close', 'id', null, true);
        $('#myModal').modal('show');
        document.getElementById('modal-close').addEventListener('click', () => {
            document.getElementsByClassName('modal-body')[0].innerHTML = '';
        });
    }).catch(error => console.error(error));
};