如何在 HTML 按钮单击时更改为标记的中心答案

【问题标题】：How to change to the center of a marker on a HTML button click如何在 HTML 按钮单击时更改为标记的中心
【发布时间】：2019-11-01 00:03:06
【问题描述】：

我正在使用 google maps API，并希望在单击 (html) 按钮时将地图的中心设置为特定位置。

我尝试添加一个名为 newLocation 的函数，该函数接受经度和纬度两个参数。然后将一个不同的函数连接到 ID 为“TestButton”的按钮。

HTML 按钮

<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="TestButton"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>

CSS

     #map {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

创建地图和设置

 var map;
        function initMap() {

            //Set center map
            var CenterLoc = { lat: 51.34, lng: 5.53 };

            //Set map settings
            map = new google.maps.Map(document.getElementById('map'),
                {
                    center: CenterLoc,
                    disableDefaultUI: true,
                    zoom: 3,
                });

创建功能和设置中心

            //Center function
            function newLocation(newLat, newLng) {
                map.setCenter({
                    lat: newLat,
                    lng: newLng
                });
            }

             google.maps.event.addDomListener(window, 'load', initMap);

            //Setting location center 
            $(document).ready(function () {
                $("TestButton").on('click', function () {
                    newLocation(48.1293954, 11.556663);
                });
            });

<script src="http://code.jquery.com/jquery.min.js"></script>

这些是我认为与此问题相关的所有代码部分。然而完整的代码在这里：https://pastebin.com/dzFYYtDH

我在浏览器控制台中没有收到任何错误。但是当我按下按钮时什么也没有发生。

【问题讨论】：

请提供一个Minimal, Reproducible Example 来证明这个问题。

标签： javascript c# html google-maps-api-3

【解决方案1】：

在 JQuery 中，要使用 id 属性选择或查找唯一的 HTML 元素，您需要使用 #id 选择器。

在您的情况下，请使用以下内容：

 $(document).ready(function () {
   $("#TestButton").on('click', function () {
     newLocation(48.1293954, 11.556663);
   });
 });

这是 jsfiddle 中的工作示例。有关 JQuery #id 选择器的更多信息 here。

希望这会有所帮助！

【讨论】：