Google地图将矩形边框添加到自定义标记

时间:2014-11-17 11:22:37

标签: javascript css json google-maps google-maps-api-3

我是google maps api的新手,

我已尝试使用多个标记并成功添加了信息窗口 现在我想将边框添加到特定的自定义标记, 我正在努力寻找带边框的自定义标记

这是jsfiddle链接:http://jsfiddle.net/jalbertbowdenii/pGBZD/

我的代码编辑了:

<!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: 1500px; height: 1400px;"></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],
                            ['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 map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(24.83982,93.97707),
      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, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

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

现在对于客户标记中心(lat,long),我必须添加矩形框和标记初始化。

   ------------
   |          |
   |  marker  |
   |          |
   ------------

我没有那么多声誉来添加谷歌地图的图像,

所以请注意上面的示例图,标记为init,边框为矩形框。

请告诉我如何将矩形框添加到自定义标记

现在我正在尝试绘制自定义标记,即中心lat长边框,

我正在努力为特定的客户标记添加边框,并在google api库中完成了很多google,这就是链接:

https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

请帮助..

...谢谢

1 个答案:

答案 0 :(得分:0)

  1. 在标记周围创建Polygon
    1. 创建自定义标记Icon
      1. 创建自定义标记Symbol