所以在我的网站上，我有按钮，当你点击它们的时候，它会起到一定的作用。 这些按钮有一个唯一的ID。 当你在手机上看到网站时，你会看到图标，而不是按钮的文本。 我已经做过了。 我想要的是，当你看到这个图标时，你可以点击它，让它完成与有ID的按钮相同的功能。 到目前为止，我所做的工作如下:
<div class="map-button-container">
<i class="fas fa-utensils"></i><button id="restaurants" class="map-button">restaurants</button>
<i class="fas fa-coffee"></i><button id="coffeeshops" class="map-button">coffeeshops</button>
<i class="fas fa-bed"></i><button id="accomodation" class="map-button">accomodation</button>
<i class="fas fa-snowboarding"></i><button id="activities" class="map-button">activities</button>
<i class="fas fa-tree"></i><button id="parks" class="map-button">parks</button>
<i class="fas fa-glass-martini-alt"></i><button id="bars" class="map-button">bars</button>
<button id="register" class="map-button">register</button>
</div>
如果我正确理解了您的问题，您可以在中添加一个字体非常棒的图标。 这样您就不必担心额外的JavaScript。 当用户点击一个按钮时，它会做某些动作。 这是最简单的方法。
<div class="map-button-container">
<button id="restaurants" class="map-button">
<i class="fas fa-utensils"></i>
<span>restaurants</span>
</button>
...
</div>
您可以将图标放在按钮内，按钮的文本可以放在一些内联元素中，比如，在电话中您可以隐藏span，这样单击就可以应用。
<div class="map-button-container">
<button id="restaurants" class="map-button"> <i class="fas fa-utensils"></i><span>restaurants</span></button>
<button id="coffeeshops" class="map-button"><i class="fas fa-coffee"></i><span>coffeeshops</span></button>
<button id="register" class="map-button">register</button>
</div>
事情是，你将不得不风格跨度文本和图标，以匹配您以前的设计根据要求。
我把图标的类添加到函数中:）它工作了！现在无论我点击按钮还是在图标中，函数都工作了！
$("#restaurants, .fa-utensils").click(function () {
var oslo = { lat: 59.9160454, lng: 10.7362453 };
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: oslo,
});
