Question

我遇到的问题是将超链接链接到特定标记。我以为我做了正确的事情，为ID（12,13,14）分配了每个标记的MarkerID并将该数字传递给触发器。其他一切都按照我的要求工作，但当我点击超链接时，我希望选择的标记放大地图并居中，就像我直接点击标记一样。

<!DOCTYPE html>

<html>
<head>
    <style>
        #map {
            height: 700px;
            width: 100%;
        }
    </style>
</head>
<body>
    <h3>My Google Maps</h3>
    <div id="map"></div>
    <div id="current">Nothing yet...</div>
    <div><a href="#" onclick="myClick(12);">Open Info Window</a></div>
    <div><a href="#" onclick="myClick(13);">Open Info Window</a></div>
    <div><a href="#" onclick="myClick(14);">Open Info Window</a></div>

    <script type="text/javascript">
        var markers = [

                    {
                        "ID": '12',
                        "Latitude": '39.340355',
            "Longitude": '-76.464811',

            "Name": '124 Yew Rd',
                    "Address1": '124 Yew Rd',`enter code here`
        }

                          ,

                    {
                        "ID": '13',
                        "Latitude": '39.339973',
            "Longitude": '-76.471656',

            "Name": '223 Red Lane',
                    "Address1": '223 Red Lane',
        }

                          ,

                    {
                        "ID": '14',
                        "Latitude": '39.340463',
            "Longitude": '-76.467042',

            "Name": '457 Make Rd',
                    "Address1": '457 Make Rd',
        }

];
    </script>


    <script>

        function initMap() {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.SATELLITE,
                gestureHandling: 'greedy'

            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.Name,
                    draggable: true,
                    markerID: data.ID





                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        map.panTo(marker.getPosition());
                        infoWindow.setContent(data.Address1);
                        infoWindow.open(map, marker);
                        map.setZoom(20);




                    });
                })(marker, data);



                google.maps.event.addListener(marker, 'dragend', function (evt) {
                    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';

                });



            }


        }
        function myClick(markerID) {

            google.maps.event.trigger(markers[markerID], 'click');


        }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
    </script>
</body>
</html>

Answer 1

要触发您想要执行的标记点击，标记必须是google.maps.Marker对象。

markers不是google.maps.Marker个对象的数组。

在创建google.maps.Marker对象时创建一个数组，并将其用作click事件的目标：

在全球范围内：

 var gmarkers = [];

更改您的功能以推送该阵列上的标记：

 for (i = 0; i < markers.length; i++) {
  var data = markers[i]
  var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: data.Name,
    draggable: true,
    markerID: data.ID
  });
  gmarkers[data.ID] = marker;  // <==================== ** add this line **

更改myClick以使用gmarkers数组：

function myClick(markerID) {
  google.maps.event.trigger(gmarkers[markerID], 'click');
}

proof of concept fiddle

代码段

＆＃13;

var gmarkers = [];

function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    gestureHandling: 'greedy'
  };
  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: data.Name,
      draggable: true,
      markerID: data.ID
    });
    gmarkers[data.ID] = marker;
    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        map.panTo(marker.getPosition());
        infoWindow.setContent(data.Address1);
        infoWindow.open(map, marker);
        map.setZoom(20);
      });
    })(marker, data);
    google.maps.event.addListener(marker, 'dragend', function(evt) {
      document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
    });
  }
}

function myClick(markerID) {
  google.maps.event.trigger(gmarkers[markerID], 'click');
}
google.maps.event.addDomListener(window, "load", initMap);
var markers = [{
    "ID": '12',
    "Latitude": '39.340355',
    "Longitude": '-76.464811',

    "Name": '124 Yew Rd',
    "Address1": '124 Yew Rd',
  },
  {
    "ID": '13',
    "Latitude": '39.339973',
    "Longitude": '-76.471656',

    "Name": '223 Red Lane',
    "Address1": '223 Red Lane',
  },
  {
    "ID": '14',
    "Latitude": '39.340463',
    "Longitude": '-76.467042',

    "Name": '457 Make Rd',
    "Address1": '457 Make Rd',
  }
];

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div><a href="#" onclick="myClick(12);">Open Info Window 12</a></div>
<div><a href="#" onclick="myClick(13);">Open Info Window 13</a></div>
<div><a href="#" onclick="myClick(14);">Open Info Window 14</a></div>
<div id="map"></div>
<div id="current">Nothing yet...</div>

＆＃13;

使用ID的JavaScript Google地图和标记引用

1 个答案: