如何在 SVG 中包含标记闪烁矩形或圆形边框图像在谷歌地图中答案

【问题标题】：How to Include marker in SVG Blinking Rectangular or circle Border image in google maps如何在 SVG 中包含标记闪烁矩形或圆形边框图像在谷歌地图中
【发布时间】：2014-11-18 09:37:05
【问题描述】：

我有这个链接

http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png

在谷歌地图中包含此使用经纬度指向特定位置，

现在我想添加闪烁边框到上面的标记链接打开..

有没有办法在HTML、CSS、JQuery中将边框闪烁添加到上述标记中，

我上面的链接打开了标记，我已经在jsfiddle完成了

如果可能的话，请提供 jsffidle 中的链接

如何在css和html、jquery和blink中为这个标记添加边框？

这是我在谷歌地图中的代码：

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    </head> 
<body>
  <div id="map" style="width: 1000px; height: 600px;"></div>

  <script type="text/javascript">
    var locations = [
                            ['STHOWBGA01_ATIF_RNID_L015',24.31026,93.56268],
                            ['GWTRGOK004_BILF_RNOD_L023',23.70692,91.27397],
                            ['GWTRBLWBN1_BILF_RNOD_L038',24.0179,91.4529],
                            ['SJOWKHL007_ATIF_RNOD_L012',25.35197,92.3723],
                            ['TTINNMSAI4_VIOF_RNID_L011',27.66616,95.87926],
                            ['SIMWUKHRL5_VIOF_RNID_L061',25.12267,94.36558],
                            ['SDIMZLUKI3_BILF_RNOD_L035',25.63658,93.64943]

            ];

    var lat_center = 24.31026,
        long_center = 93.56268;

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

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

    var marker, i, text;

    for (i = 0; i < locations.length; i++) {  

      marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][3], locations[i][2]),
          map: map
      });

      text = locations[i][0];

      if(locations[i][4] === lat_center && locations[i][2] === long_center) {

          marker.setAnimation(google.maps.Animation.DROP);
          marker.setIcon('http://maps.google.com/mapfiles/arrow.png ');
        //text += '<br>' + 'Additionl text for centered marker';
      }

      google.maps.event.addListener(marker, 'mouseover', (function(marker, text) {
        return function() {
          infowindow.setContent(text);
          infowindow.open(map, marker);
        }
      })(marker, text));
    }

  </script>
</body>
</html>

我想为 lat_center 和 long_center 绘制，现在在这个 marker.setIcon 在此我必须对 marker.seticon

进行更改

是否可以在谷歌地图中使用多个标记？

【问题讨论】：

您希望所提供图标的黑色边框闪烁吗？
是的，请告诉我
边框闪烁
您需要使用 Photoshop 或类似工具创建一个带有白色边框的版本，然后您可以使用 css 使它们闪烁
您能否为我在 jsfiddle 中给出的链接制作带有闪烁边框的链接，或者是否有任何在线编辑器可以为标记添加边框...请告诉我

标签： javascript html css image photoshop

【解决方案1】：

http://jsfiddle.net/Muthukumaru/n4d80zLd --> jsfiddle 链接

为标记使用 SVG 代码

<svg class="marker" style="left: 300.779px; top: 95.16px;" height="66" width="66">
    <circle cy="33" cx="33" class="mark" r="25">
       <set id="show" attributeName="visibility" attributeType="CSS" to="visible"
         begin="0s; hide.end" dur="1s" fill="freeze"/>

        <set id="hide" attributeName="visibility" attributeType="CSS" to="hidden"
         begin="show.end" dur="1s" fill="freeze"/>
     </circle>

   <image x="18" y="-5" width="30" height="80"
     xlink:href="http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png" />     
 </svg>

边框css

    .mark{
    fill: none;
stroke: #FF9100;
stroke-width: 1px;
cursor: pointer;
z-index: 1000;
}

【讨论】：

嗨..muthukumar 我非常感谢这个 svg 代码，我已经编辑了上面的代码，请检查给定 lat_center 和 long_center 的特定标记的多个标记是否可以用 circle 闪烁。 ..？请帮助我非常感谢

【解决方案2】：

如下代码：

HTML：

  <style type="text/css">
    .with_border {
       border:2px solid red;
     }
   </style>

  <div>

<p>click on the image to blink</p>

<img id="border_icon" onclick="show()" class="" src="http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png">


 </div>

和你的 javascript (你将需要 JQUERY )

<script type="text/javascript">
    var blinkRate=500;

    function removeBorder(){
       $("#border_icon").removeClass("with_border");
       setTimeout(showBorder,blinkRate);

    }
 function showBorder(){
       $("#border_icon").addClass("with_border");
       setTimeout(removeBorder,blinkRate);
    }

   $('#border_icon').click(function() {
       $('#border_icon').addClass("with_border");

       setTimeout(removeBorder,blinkRate);
  });

</script>

【讨论】：

你好，你能给我jsfiddle链接吗？我已经编辑了我上面的代码，请检查...