谷歌地图API多边形标签

时间:2015-09-30 11:12:44

标签: javascript google-maps google-maps-api-3 google-maps-markers

我正在尝试在通过google maps api绘制的多边形上添加标签。

我的getPolygons.php ajax调用的结果如下所示:

var triangleCoords = [
    {lat:38.88154,lng: -77.02880},
    {lat:38.83863,lng:-77.02760},
    {lat:38.83917,lng:-77.07292},
    {lat:38.84251,lng: -77.12098},
    {lat:38.86951,lng:-77.13575},
    {lat:38.88769, lng:-77.05404}
];

代码:

$.ajax({
    type:"GET",
    url:"getPolygons.php",
    dataType:"json",
    success:function(result){
            $.each(result,function(e,i){
            var triangleCoords = [];
            var color = i.color;
            $.each(i.points,function(ee,ii){
                    var lat = parseFloat(ii.lat);
                    var lon = parseFloat(ii.lon);
                    triangleCoords.push({lat:lat,lng:lon});
            });
            var bermudaTriangle = new google.maps.Polygon({
                 paths: triangleCoords,
                 strokeColor: '#FF0000',
                 strokeOpacity: 0.8,
                 strokeWeight: 2,
                 fillColor: color, 
                 fillOpacity: 0.35
            });
            bermudaTriangle.setMap(map);

  var pos = new google.maps.LatLng(lat,lon);
  var marker = new MarkerWithLabel({
          position: pos,
          map: map,
          labelAnchor: new google.maps.Point(3, 30),
         labelClass: Sclass, // the CSS class for the label
          labelInBackground: false
          });
            });
     }

我尝试过使用markerswithlabel.js

我包含这个脚本:

 <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&libraries=drawing&callback=initMap" defer></script>

和标准

 <script src='markerLabel.js'></script>

但是当我包含markerLabel.js时,我收到此错误:

 Uncaught ReferenceError: google is not defined

我正在尝试做这样的事情:

My example

1 个答案:

答案 0 :(得分:0)

您正在异步加载Google Maps Javascript API。 MarkerWithLabel库依赖于此,因此需要在Google Maps Javascript API完成加载后加载。

在Google Maps Javascript API之后异步加载库,或者以正确的顺序加载它们。