Question

在我的联系页面上，我有3-4个地址。我想在页面加载时最初在谷歌地图上显示一个地址。当用户点击不同的地址时，标记会更改并移动到该地址。

最初，在页面加载时，我正确地获得谷歌地图。地图显示一切都很好。但是当我点击不同的地址移动标记时，标记移动但地图变为灰色。我的意思是地图没有像第一次显示的那样完美呈现。

以下是

的截图

Screenshot 1（最初，地图加载完全正常）

Screenshot 2（但当我点击地址更改地图位置时，它会显示灰色地图）

这是我的代码

$(function(){

var map;
var marker;
// Load Map function
function loadMap(lat,long, fullAddress) {
    var mapCanvas = document.getElementById("store-map");
    let latLong = new google.maps.LatLng(lat, long);
    var mapOptions = {
        center: latLong,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(mapCanvas, mapOptions);

    marker = new google.maps.Marker({
        position: latLong,
        map: map,
        animation: google.maps.Animation.DROP,
        title: "Address"
    });

    var infoWindow = new google.maps.InfoWindow();
    //Create and open InfoWindow.
    infoWindow.setContent(fullAddress);
    marker.addListener('click', function() {
        infowindow.open(map, marker);
    });

    infoWindow.open(map, marker);

}

var defaultAddress = "448-451, Udyog Vihar, Phase - V</br>Gurugram, Haryana- 122001",
        defaultLat = "28.4759576",
        defaultLong = "77.0363467";
 on page load load google map with default address    
google.maps.event.addDomListener(window, 'load', 
loadMap(defaultLat,defaultLong, defaultAddress));

// Get clickable item
var $locationItem = $('.store-location__item');
// On ckick of each address
$locationItem.on('click',function(event) {
    // event.preventDefault();
    /* Act on the event */
    let lat = $(this).find('.lat').text();
    let long = $(this).find('.lat').text();
    let address = $(this).find('.store-location__address').html();
    console.log(lat, long, address);
    loadMap(lat,long,address);
});


});

我错过了什么吗？为什么我从dom获取灰色地图后根据纬度和经度更改位置？

注意：

我在HTML中给出了经度和经度，其中不透明度为0和得到它点击以更改位置
我还尝试创建一个新标记并删除以前的标记而不是加载一个新的谷歌地图的性能，但也是给出灰色问题。
我还尝试检查css，如溢出：可见＆＃39;和＆＃39;溢出：隐藏＆＃39;但灰色问题没有任何反应。

为什么我在点击事件第二次加载谷歌地图后会得到灰色地图？

0 个答案: