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

【问题标题】：How to set style of a data layer feature label in Google maps api?如何在谷歌地图 api 中设置数据层特征标签的样式？
【发布时间】：2016-11-24 11:19:00
【问题描述】：

我有这个工作的 js 代码：

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);

代码生成这个输出：

如何设置“L1PIAZZA”标签的样式？

【问题讨论】：

标签： javascript google-maps-api-3 geojson

【解决方案1】：

使用记录的属性来设置MarkerLabel的样式：

属性

颜色类型：字符串

标签文本的颜色。默认颜色为黑色。

fontFamily 类型：字符串

标签文本的字体系列（相当于 CSS font-family 属性）。

fontSize 类型：字符串

标签文本的字体大小（相当于 CSS 的 font-size 属性）。默认大小为 14 像素。

fontWeight 类型：字符串

标签文本的字体粗细（相当于 CSS 的 font-weight 属性）。

文本类型：字符串

要在标签中显示的文本。

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

代码 sn-p：

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>

【讨论】：