2016-11-08 65 views
4

此代碼是在標籤點設置標題,但是 如何更改字體大小?在Google Maps API中設置標籤大小

label: {text: marcadores[i][0], color: 'black', TAGFORFONTSIZE: valuesize} 

我的代碼:

<html lang='es'> 
<head> 
    <meta charset='UTF-8'> 
    <style type='text/css'> 
     #mapa { height: 500px; } 
    </style> 
    <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> 
    <script type='text/javascript'> 
     function initialize() { 
      var marcadores = [ 
       ['usu1', -5.31987835340327, -52.8212431459598], 
       ['usu4', 42.3617, -3.6789] 
      ]; 

      var map = new google.maps.Map(document.getElementById('mapa'), { 
       zoom: 7, 
       center: new google.maps.LatLng(41.503, -5.744), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      var infowindow = new google.maps.InfoWindow(); 
      var marker, i; 

      for (i = 0; i < marcadores.length; i++) { 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]), 
        map: map, 
        label: {text: marcadores[i][0], color: 'black'} 
       }); 

       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         infowindow.setContent(marcadores[i][0]); 
         infowindow.open(map, marker); 
        } 
       })(marker, i)); 
      } 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body> 
    <div id='mapa'></div> 
</body> 
</html> 

回答

11

the documentation

fontSize的類型:字符串

標籤文本的字體大小(相當於CSS字體 - 大小的屬性)。默認大小是14px。

marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]), 
    map: map, 
    label: { 
    text: marcadores[i][0], 
    color: 'black', 
    fontSize: "8px" 
    } 
}); 

proof of concept fiddle

代碼片斷:

function initialize() { 
 
    var marcadores = [ 
 
    ['usu1', -5.31987835340327, -52.8212431459598], 
 
    ['usu4', 42.3617, -3.6789] 
 
    ]; 
 
    var map = new google.maps.Map(document.getElementById('mapa'), { 
 
    zoom: 7, 
 
    center: new google.maps.LatLng(41.503, -5.744), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    var marker, i; 
 
    for (i = 0; i < marcadores.length; i++) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]), 
 
     map: map, 
 
     label: { 
 
     text: marcadores[i][0], 
 
     color: 'black', 
 
     fontSize: "8px" 
 
     } 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     infowindow.setContent(marcadores[i][0]); 
 
     infowindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#mapa { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="mapa"></div>