javascript - 列出数据以及单击数据时移动的 map

我的头衔也许使我听起来像个白痴。
我只是不知道如何命名我想在这里做什么。
我从数据库中以Json格式获取个人数据的位置。
与使用标记聚类器jQuery插件相比，这些人在地图上定位明确。
但是我真的很喜欢他们在这个网站上所做的事情。
http://www.fetalhope.org/patients-families/treatment?cid=168&x=35&y=14

如果您能帮助我建立相同的设置，我将不胜感激。
我也愿意支付，但是失业者期望不高。
我只是想学习。

{
  "users": [
    {
      "name": "John Doe",
      "latitude": "22.3430194444444",
      "longitude": "114.110386111111"
    },
    {
      "name": "John Doe",
      "latitude": "48.4048403957642",
      "longitude": "2.68452644348145"
    }
  ]
}

        $(function CheckinMap() {
            $.when($.ajax({
                type: "GET",
                dataType: "json",
                url: "content/sewerage/index.cs.asp?Process=ViewMap"
            })).done(      function initialize(data) {
                var MapData = data;
                var center = new google.maps.LatLng(41.00527, 28.97696);
                var map = new google.maps.Map(document.getElementById('checkinmap'), {
                  zoom: 6,
                  center: center,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  maxZoom: 14
                });
                var markers = [];
                for (var i = 0; i < MapData.users.length; i++) {
                  var location = MapData.users[i];
                  var latLng = new google.maps.LatLng(location.NIDLatitude,
                      location.NIDLongitude);
                  var marker = new google.maps.Marker({
                    position: latLng
                  });
                  markers.push(marker);
                }
                var markerCluster = new MarkerClusterer(map, markers);
            });
        });

最佳答案

根据您使用的api（版本为V3）的api版本，Google Maps可以做的就是在标记上使用侦听器，当单击该标记时，您可以获取一个标识元素的值（假设是id）您要关注列表。
因此，假设您有一个标记，则可以扩展它并添加您的id。

var markerItem = new google.maps.Marker();
markerItem.metadata = {id: 1};

然后添加事件监听器：

  google.maps.event.addListener(markerItem, 'click', function () {
            var targetId = markerItem.get("id");
            //do something with the target id like scrolling the desired point of the list

  });

在事件内，您可以将地图居中到单击标记的纬度/经度，创建一个新的infoWindow并显示它，等等，

var infoWindowItem = new google.maps.InfoWindow({content: 'Some content here!'});
infoWindowItem.open(map, markerItem);

关于javascript - 列出数据以及单击数据时移动的 map ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14842292/