如何在谷歌地图中点击标记群时获取所有的图钉/标记?

时间:2018-02-14 14:41:43

标签: javascript google-maps google-maps-api-3

我正在使用google maps api创建一个包含群集的商店定位器,我指的是marker cluster api

我希望在标记集中获取商店列表,而不是使用图钉/标记返回标记集群。请找到以下代码 -

google.maps.event.addListener(mapsCore.mapsVar.markerCluster, 'clusterclick', function(cluster) {
            var content = "";

            // Convert lat/long from cluster object to a usable MVCObject
            var info = new google.maps.MVCObject;
            info.set('position', cluster.center_);
            //----
            //Get markers
            console.log(cluster.getSize());
            var markers = cluster.getMarkers();
            var x = {};
            $(mapsCore.mapsVar.totalResults.Result).each(function(k, v) {
                $(markers).each(function(km, vm) {
                    if (parseFloat(v.LAT) == parseFloat(markers[km].position.lat()) && parseFloat(v.LON) == parseFloat(markers[km].position.lng())) {
                        // locArr[k] = { lat: parseFloat(v.CounterLatitude), lng: parseFloat(v.CounterLongitude) };
                        x.Counter_ID = v.Counter_ID;
                        x.Counter_Name = v.Counter_Name;
                        x.Counter_Zip_code = v.Counter_Zip_code;
                        x.Address_1 = v.Address_1;
                        x.Address_2 = v.Address_2;
                        x.Province = v.Province;
                        x.City = v.City;
                        x.Area = v.Area;
                        x.SubArea = v.SubArea;
                        x.Counter_Tel = v.Counter_Tel;
                        x.Counter_Email = v.Counter_Email;
                        x.Open_Time = v.Open_Time;
                        x.Close_Time = v.Close_Time;
                        x.LAT = v.LAT;
                        x.LON = v.LON;
                        x.MR_FLG = v.MR_FLG;
                        mapsCore.mapsVar.clusterDetail.Results.push(x);
                        x = {};
                    }
                });
            });
        });

2 个答案:

答案 0 :(得分:0)

As a workaround you can set a custom image to an transparent png and text size to 0, that way it'll be invisible on the map.

cluster.setStyles({
  url: your_path/transparent.png,
  height: 20,
  width: 20,
  textSize: 0
});

Alternatively you can try and see if setting the image height and width to 0 works.

答案 1 :(得分:0)

所有

感谢您帮助格式化我的代码和评论,无论我找到解决方案。我将附上

下面的代码

google.maps.event.addListener(mapsCore.mapsVar.markerCluster,' clusterclick',function(cluster){                 var content ='';

            // Convert lat/long from cluster object to a usable MVCObject
            var info = new google.maps.MVCObject;
            info.set('position', cluster.center_);
            //----
            //Get markers
            console.log(cluster.getSize());
            var markers = cluster.getMarkers();
            var x = {};
            mapsCore.mapsVar.clusterDetail.Counters.length = 0;
            $(mapsCore.mapsVar.totalResults.Counters).each(function(k, v) {
                $(markers).each(function(km, vm) {
                    console.log(parseFloat(v.CounterLatitude) == parseFloat(vm.position.lat()) && parseFloat(v.CounterLongitude) == parseFloat(vm.position.lng()));
                    if (parseFloat(v.CounterLatitude) == parseFloat(vm.position.lat())) {
                        // locArr[k] = { lat: parseFloat(v.CounterLatitude), lng: parseFloat(v.CounterLongitude) };
                        x.CounterCode = v.CounterCode;
                        x.CounterName = v.CounterName;
                        x.CounterZipCode = v.CounterZipCode;
                        x.AddressLine1 = v.AddressLine1;
                        x.AddressLine2 = v.AddressLine2;
                        x.Province = v.Province;
                        x.City = v.City;
                        x.Area = v.Area;
                        x.SubArea = v.SubArea;
                        x.CounterPhoneNumber = v.CounterPhoneNumber;
                        x.CounterEmailAddress = v.CounterEmailAddress;
                        x.CounterOpenTime = v.CounterOpenTime;
                        x.CounterCloseTime = v.CounterCloseTime;
                        x.CounterLatitude = v.CounterLatitude;
                        x.CounterLongitude = v.CounterLongitude;
                        x.IsMagicRingAvailable = v.IsMagicRingAvailable;
                        mapsCore.mapsVar.clusterDetail.Counters.push(x);
                        x = {};
                    }
                });
            });
            console.log(mapsCore.mapsVar.clusterDetail);
            var template = $.templates("#mapslist");
            var output = template.render(mapsCore.mapsVar.clusterDetail);
            $(".store-list-section").html(output);
        });

始终需要重置像 -

这样的对象数组

mapsCore.mapsVar.clusterDetail.Counters.length = 0;