javascript 如何显示谷歌Map时,点击“在哪里找到”按钮,在每个产品的详细信息屏幕?

3ks5zfa0  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(110)

如何显示谷歌Map时,点击“在哪里找到”按钮,在每个产品的详细信息屏幕?2这谷歌Map使用户能够添加标记存储到本地存储。
函数prodDetails(){让详细信息Btns =文档.查询选择器全部(“.详细信息Btn”);//获取先前为(var i = 0;i〈细节底部长度;i++){设细节Btn =细节Btns [i];detailsBtn.addEventListener(“单击”,()=〉{ //在单击事件时添加单个详细信息btn product.innerHTML =“";//隐藏产品列表div backBtn.removeAttribute(“隐藏”);

// load details
                    let index = detailsBtn.dataset.index; // get index of song item
                    let songs = data.songs[index];
                    details.innerHTML = `
                <h2>${songs.name}</h2>
                <img src="${songs.image}" height="200px">
                <h2>Brand: ${songs.brand}</h2>
                <h2>Style: ${songs.style}</h2>
                <h2>Discount: ${songs.discount}</h2>
                <h2>Price: $${songs.price}</h2>
                <button data-index="${i}" class="mapBtn">Where to Find</button>
                `;
                });
            }
        }
guicsvcw

guicsvcw1#

要在用户单击每个产品详细信息屏幕中的“何处查找”按钮时显示GoogleMap,您可以执行以下步骤:
在HTML文件中创建一个新的div元素来保存Map,并给予它一个唯一的id,以便在JavaScript代码中引用它。
在“Where To Find”按钮的click事件侦听器中,使用Google Maps API创建一个新的map对象,并使用刚刚创建的div元素初始化它。您可以使用.getElementById()方法在JavaScript代码中引用div元素。
为可以找到产品的商店位置添加一个标记,方法是在一个新的google.maps.Marker对象上调用.setMap()方法,传入map对象和商店位置的坐标。
要将标记信息存储在本地存储中,可以使用localStorage.setItem()方法并将标记位置(纬度和经度)作为对象存储在本地存储中。
要从本地存储检索标记信息,可以使用localStorage.getItem()方法从本地存储检索标记对象,然后使用该对象设置标记在Map上的位置。

let mapBtns = document.querySelectorAll(".mapBtn"); // get button element(s) previously created
for (var i = 0; i < mapBtns.length; i++) {
    let mapBtn = mapBtns[i];
    mapBtn.addEventListener("click", () => {
        // create a new map object
        let map = new google.maps.Map(document.getElementById("map"), {
            zoom: 8,
            center: { lat: lat, lng: lng }
        });
        // add marker for the store location
        let marker = new google.maps.Marker({
            position: { lat: lat, lng: lng },
            map: map
        });
        // store marker info in localstorage
        localStorage.setItem("marker", JSON.stringify(marker.getPosition()));
    });
}

相关问题