Google Maps API Markerclusterer Plus 设置图标

问题描述 投票：0回答：3

我正在制作谷歌地图，用户可以在地图上拥有无限数量的不同类别。我想将每个类别聚类到不同颜色的聚类中。

到目前为止，我正在使用谷歌地图符号作为各个标记，我也想为标记集群创建一个符号。 通过检查标记聚类器的reference加上。我看到它要求提供图像 url - 有什么方法可以使用符号代替吗？

谢谢！

javascript google-maps-api-3 markerclusterer
3个回答
10
投票

符号（地图 API 的含义），基本上是由 SVG 路径定义的。

MarkerClusterer 通过 

<img/>
绘制簇图标。

image-src 也可能是 data-URI，因此可以绘制这样的符号（SVG 文档）如 

<img/>
.

简单实现：

function initialize() {
        var Symbol=function(id,width,height,fill){
          var s={ 
            heart:  {
                      p:'M340.8,83C307,83,276,98.8,256,124.8c-20-26-51-41.8-84.8-41.8C112.1,83,64,131.3,64,190.7c0,27.9,10.6,54.4,29.9,74.6 L245.1,418l10.9,11l10.9-11l148.3-149.8c21-20.3,32.8-47.9,32.8-77.5C448,131.3,399.9,83,340.8,83L340.8,83z',
                      v:'0 0 512 512'
                    },
            gear:   {
                      p:'M462,280.72v-49.44l-46.414-16.48c-3.903-15.098-9.922-29.343-17.675-42.447l0.063-0.064l21.168-44.473l-34.96-34.96 l-44.471,21.167l-0.064,0.064c-13.104-7.753-27.352-13.772-42.447-17.673L280.72,50h-49.44L214.8,96.415 c-15.096,3.9-29.343,9.919-42.447,17.675l-0.064-0.066l-44.473-21.167l-34.96,34.96l21.167,44.473l0.066,0.064 c-7.755,13.104-13.774,27.352-17.675,42.447L50,231.28v49.44l46.415,16.48c3.9,15.096,9.921,29.343,17.675,42.447l-0.066,0.064 l-21.167,44.471l34.96,34.96l44.473-21.168l0.064-0.063c13.104,7.753,27.352,13.771,42.447,17.675L231.28,462h49.44l16.48-46.414 c15.096-3.903,29.343-9.922,42.447-17.675l0.064,0.063l44.471,21.168l34.96-34.96l-21.168-44.471l-0.063-0.064 c7.753-13.104,13.771-27.352,17.675-42.447L462,280.72z M256,338.4c-45.509,0-82.4-36.892-82.4-82.4c0-45.509,36.891-82.4,82.4-82.4 c45.509,0,82.4,36.891,82.4,82.4C338.4,301.509,301.509,338.4,256,338.4z',
                      v:'0 0 512 512'
                    },
            vader:  {
                      p:'M 454.5779,419.82295 328.03631,394.69439 282.01503,515.21933 210.30518,407.97233 92.539234,460.65437 117.66778,334.11278 -2.8571457,288.09151 104.38984,216.38165 51.707798,98.615703 178.2494,123.74425 224.27067,3.2193247 295.98052,110.46631 413.74648,57.784277 388.61793,184.32587 509.14286,230.34714 401.89587,302.057 z',
                      v:'0 0 512 512'
                    }
            }
          return ('data:image/svg+xml;base64,'+window.btoa('<svg xmlns="http://www.w3.org/2000/svg" height="'+height+'" viewBox="0 0 512 512" width="'+width+'" ><g><path fill="'+fill+'" d="'+s[id].p+'" /></g></svg>'));
        }
        
        
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 1,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 500; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers,{styles:[
                                                                        {width:50,height:50,url:Symbol('heart',50,50,'red')},
                                                                        {width:75,height:75,url:Symbol('gear',75,75,'green')},
                                                                        {textColor:'tomato',textSize:'18',width:100,height:100,url:Symbol('vader',100,100,'blue')}
                                                                     ]});
      }
      google.maps.event.addDomListener(window, 'load', initialize);
html,body,#map{height:100%;margin:0;padding:0;}
<div id="map"></div>
<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/src/data.json"></script>
<script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>

符号的属性是：

  • p
    （路径）
  • v
    （viewBox）

注意：

window.btoa
不支持IE<10 , you'll need to implement it on your own when you need to support older IEs

1
投票

过去我必须处理这个问题。

为了解决这个问题，我所做的就是扩展类 Cluster 以添加新的 Google 标记作为属性。该标记与群集对象附加在同一位置，是显示符号的标记。

请记住，为了避免符号和簇图像重叠，您必须将簇样式的不透明度设置为 0。

希望它对你有用。

0
投票

这里有一些很棒的图标，是我从airtable中获取的

别针

data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20version%3D%221.1%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%20512%20512%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%2224px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%2224px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20className%3D%22flex%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23fbfbfb%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M454.848%2C198.848c0%2C159.225-179.751%2C306.689-179.751%2C306.689c-10.503%2C8.617-27.692%2C8.617-38.195%2C0c0%2C0-179.751-147.464-179.751-306.689C57.153%2C89.027%2C146.18%2C0%2C256%2C0S454.848%2C89.027%2C454.848%2C198.848z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23ef3061%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M454.848%2C198.848c0%2C159.225-179.751%2C306.689-179.751%2C306.689c-10.503%2C8.617-27.692%2C8.617-38.195%2C0c0%2C0-179.751-147.464-179.751-306.689C57.153%2C89.027%2C146.18%2C0%2C256%2C0S454.848%2C89.027%2C454.848%2C198.848z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23fbfbfb%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M256%2C298.89c-55.164%2C0-100.041-44.879-100.041-100.041S200.838%2C98.806%2C256%2C98.806s100.041%2C44.879%2C100.041%2C100.041S311.164%2C298.89%2C256%2C298.89z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20

集群

data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20version%3D%221.1%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%2043%2043%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%2243px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%2243px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23ef3061%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cx%3D%2221.5%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cy%3D%2221.5%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20r%3D%2211.5%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20M%20%20%2035.988887394336025%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2017.617714323462188%0A%20%20%20%20%20%20%20%20%20%20%20%20A%20%20%2015%2015%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%2C%200%2C%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2025.382285676537812%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2035.988887394336025%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20M%20%20%2017.617714323462188%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2035.988887394336025%0A%20%20%20%20%20%20%20%20%20%20%20%20A%20%20%2015%2015%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%2C%200%2C%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%207.011112605663973%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2017.617714323462195%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20M%20%20%2010.893398282201785%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2010.893398282201789%0A%20%20%20%20%20%20%20%20%20%20%20%20A%20%20%2015%2015%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%2C%200%2C%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2032.10660171779821%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2010.893398282201785%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%23ef3061%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%223%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22transparent%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3D%220.7%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20M%20%20%2041.5%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2021.5%0A%20%20%20%20%20%20%20%20%20%20%20%20A%20%20%2020%2020%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%2C%200%2C%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2031.5%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2038.82050807568877%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20M%20%20%2011.500000000000004%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2038.82050807568878%0A%20%20%20%20%20%20%20%20%20%20%20%20A%20%20%2020%2020%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%2C%200%2C%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%201.5%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2021.500000000000004%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20M%20%20%2011.499999999999991%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%204.1794919243112325%0A%20%20%20%20%20%20%20%20%20%20%20%20A%20%20%2020%2020%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%2C%200%2C%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2031.5%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%204.179491924311229%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%23ef3061%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%223%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22transparent%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3D%220.4%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.