Javascript 如何在谷歌地图中的SVG闪烁矩形或圆形边框图像中包含标记
我有这个链接 在谷歌地图中,使用lat-long指向特定位置 现在我想将闪烁的边框添加到上面的标记链接中 是否有任何可能的方法将边框闪烁添加到HTML、CSS、JQuery、 我在上面的链接中打开了标记,我已经在JSFIDLE中完成了 如果可能,请在jsffile中为我提供链接 如何在css和html、jquery和blink中为该标记添加边框 这是我在谷歌地图中的代码:Javascript 如何在谷歌地图中的SVG闪烁矩形或圆形边框图像中包含标记,javascript,html,css,image,photoshop,Javascript,Html,Css,Image,Photoshop,我有这个链接 在谷歌地图中,使用lat-long指向特定位置 现在我想将闪烁的边框添加到上面的标记链接中 是否有任何可能的方法将边框闪烁添加到HTML、CSS、JQuery、 我在上面的链接中打开了标记,我已经在JSFIDLE中完成了 如果可能,请在jsffile中为我提供链接 如何在css和html、jquery和blink中为该标记添加边框 这是我在谷歌地图中的代码: <!DOCTYPE html> <html> <head> <meta h
<!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>
我想在这幅图中画出拉图中心和长图中心
marker.setIcon在本例中,我必须对marker.setIcon进行更改
谷歌地图中有多个标记吗?下面的代码: HTML: JQUERY将需要您的javascript
<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链接
将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>
您希望所提供图标的黑色边框闪烁吗?是的,请确切地告诉我使用闪烁边框您需要使用photoshop或类似工具创建带有白色边框的版本,然后你可以使用csscan让它们闪烁,你可以使用我在JSFIDLE中提供的链接,使用边框闪烁,或者是否有任何在线编辑器为标记添加边框…请让我知道Hi..muthukumar我非常感谢这段svg代码,我已经编辑了上面的代码,请使用给定横向中心和纵向中心,是否可以用圆圈闪烁。。。?请帮助我非常感谢你好,卡哈你能给我JSFIDLE链接我已经编辑了我的代码上面,请检查。。。
<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>
.mark{
fill: none;
stroke: #FF9100;
stroke-width: 1px;
cursor: pointer;
z-index: 1000;
}