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

Question

我正在使用 google 地图 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

我在浏览器控制台中没有收到任何错误。但是当我按下按钮时没有任何反应。

Answer 1

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

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

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

这是 jsfiddle 中的工作示例。有关 JQuery #id 选择器 here.

的更多信息

希望对您有所帮助！

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

How to change to the center of a marker on a HTML button click

html

javascript

c#

google-maps-api-3