如何在 Google 地图 api 中设置数据层特征标签的样式？

Question

I've got this working js code:

var p;
p = new google.maps.Data();
p.loadGeoJson('http://mysource.example.com');
p.setStyle( function(feature){
    var icon = feature.getProperty('icon');
    var title = feature.getProperty('title');
    return  { 
        icon: icon,
        label: title
    }
});
p.setMap(map);

The code generate this output:

:

How can I set the style of the label "L1PIAZZA"?

Answer 1

Use the documented properties to style the MarkerLabel :

Properties

color Type: string

The color of the label text. Default color is black.

fontFamily Type: string

The font family of the label text (equivalent to the CSS font-family property).

fontSize Type: string

The font size of the label text (equivalent to the CSS font-size property). Default size is 14px.

fontWeight Type: string

The font weight of the label text (equivalent to the CSS font-weight property).

text Type: string

The text to be displayed in the label.

p.setStyle(function(feature) {
  var icon = feature.getProperty('icon');
  var title = feature.getProperty('title');
  return {
    icon: {
      url: icon,
      labelOrigin: new google.maps.Point(15, -10)
    },
    label: {
      color: "blue",
      fontFamily: "Courier",
      fontSize: "24px",
      fontWeight: "bold",
      text: title
    }
  }
});

proof of concept fiddle

code snippet:

 var geocoder; var map; function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var p; p = new google.maps.Data(); p.addGeoJson({ "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "icon": "http://maps.google.com/mapfiles/ms/micons/blue.png", "title": "blue", }, "geometry": { "type": "Point", "coordinates": [-122.1419, 37.4419] } }] }); p.setStyle(function(feature) { var icon = feature.getProperty('icon'); var title = feature.getProperty('title'); return { icon: { url: icon, labelOrigin: new google.maps.Point(15, -10) }, label: { color: "blue", fontFamily: "Courier", fontSize: "24px", fontWeight: "bold", text: title } } }); p.setMap(map); } google.maps.event.addDomListener(window, "load", initialize);

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div>