如何显示谷歌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>
`;
});
}
}
1条答案
按热度按时间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上的位置。