如何在Google地图上将覆盖矩形SVG闪烁边框添加到特定标记(中心)

时间:2014-11-27 09:37:38

标签: javascript jquery google-maps svg overlay

我有不同的名称和纬度和逻辑,现在我想突出显示具有闪烁矩形边框的特定标记,而不是我们可以将SVG代码添加到特定标记。但我不知道SVG代码可以任何人建议如何添加。

如何将闪烁的覆盖SVG闪烁矩形边框添加到特定标记

<html>
<head> 
 <script src="http://maps.google.com/maps/api/js?sensor=false"  type="text/javascript"></script>
</head> 


<body>
  <div id="map" style="width: 1330px; height: 850px;"></div>

  <script type="text/javascript">
    var locations = [
                            STHOWBGA01_ATIF_RNID_L015,24.31026,93.56268,
                            SWKHMRID01_BILF_RNID_L039,25.65182,91.62737,
                            SMOKZUNB01_GTLF_RNID_L006,26.019,94.53,
                            SDIMSGRN01_ATCF_RNID_L023,25.8271,93.6853,
                            SKOHKRMA01_BILF_RNID_L010,25.5815,94.21959,
                            SMOKANGB01_BILF_RNID_L001,26.214,94.6876,
                            SDIMDIM087_ATIF_TTID_L026,25.8939,93.7602,
                            SWKHLYNKI1_GTLF_RNID_L061,25.5041,91.6109,
                            SIMWIMP109_ATCF_TTOD_L047,24.83982,93.97707,
                            SDIMZLUKI2_ATCF_RNID_L017,25.63998,93.66512,
                            GWTRTLMUR5_BILF_RNOD_L039,23.841,91.6202,
                            GWTRKLBRI1_BILF_RNOD_L017,23.50866,91.26185,
                            GWTRBXNGR1_BILF_RNOD_L033,23.61268,91.17243,
                            GWTRAGR101_BILF_TTOD_L055,23.8655,91.25584,
                            GWTRBIS007_BILF_RNOD_L022,23.6785,91.2963
                    ];

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: new google.maps.LatLng(24.31026,93.56268),

          mapTypeId: google.maps.MapTypeId.ROADMAP
        });



        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });



          google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
    }
    google.maps.event.addDomListener(window, 'load', LatLng);
  </script>
    <div id="map-canvas"></div>
</body>
</html>

请建议, 感谢。

1 个答案:

答案 0 :(得分:0)

您需要先创建一个SVG符号,然后将它们与标记相关联。虽然我认为您必须制作自定义图标并将其嵌入标记类中,因为如果您想自定义标记图标,则只能将它们作为一个整体进行自定义,而不仅仅是将边框设置在其上。 这是创建自定义标记图标的SVG docs。 而且,这是来自Google的sample code将它们嵌入到您的标记类中。

希望这有帮助。