如何在Google地图上添加覆盖矩形SVG闪烁边框到特定标记（中心） [英] How to add Overlaying rectangular SVG blinking border to a particular marker(center) on Google Maps
问题描述
我有不同的名称和纬度和纬度，现在我想突出显示具有闪烁矩形边框的特定标记，比我们可以将SVG代码添加到特定标记。但我不知道SVG代码可以任何人建议如何添加。
如何添加覆盖SVG闪烁矩形边框闪烁到特定标记， p>
< html>
< head>
< script src =http://maps.google.com/maps/api/js?sensor=falsetype =text / javascript>< / script>
< / head>
< body>
< div id =mapstyle =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_L 033,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;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （位置[i] [1]，位置[i] [2]），
map：map
}）;
$ b 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>
请建议，
谢谢。
您需要首先创建一个SVG符号，然后将它们与标记相关联。虽然我认为您必须制作自定义图标并将其嵌入到标记类中，因为如果您要自定义标记图标，则只能将它们定制为一个整体，而不能仅将它放在边界上。
这里是 SVG文档来创建自定义标记图标。
并且，以下是示例代码 Google将它们嵌入到标记类中。
希望这有帮助。
I have different Names and Latitude and logitude and now i want to highlight the particular marker with Blinking rectangular border, than we can add the SVG Code to the particular marker. But I don't know the SVG code Can any one suggest how to add.
How to add the Overlaying SVG blinking rectangular Border with Blinking to a particular marker,
<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>
Please suggest, Thanks.
You would need to create an SVG symbol as you desire first and then associate them with the markers. Although I think you would have to make the custom icon and embed it in the marker class because if you want to customize the marker icons you can only customize them as a whole and not just put border on it. Here's the SVG docs to create your custom marker icon. And, here's the sample code from Google to embed them in you marker class.
Hope this helped.
这篇关于如何在Google地图上添加覆盖矩形SVG闪烁边框到特定标记（中心）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
