Google Maps API 从 GeoJSON 点几何中绘制文本

Question

我有这样的 geoJSON 数据：

{ "type": "FeatureCollection", 
  "features": [{"type": "Feature",
                "properties": {"text": "Street Foo", 
                               "Font": "25", 
                               "Angle": "0.99999"},
                "geometry":{"type":"Point",
                            "coordinates":[44.4878559081156,9.76673954155489]}}
              ]
}

我想用 Google Maps API 绘制一个字体大小为 25 和辐射角倾角为 0.999 的文本“Street Foo”。

我试过这个：

    var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(44.4878559081156,9.76673954155489),
    mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    testi = new google.maps.Data();
    testi.loadGeoJson('myjsonData.json');  

    // HERE I DON'T KNOW HOW TO GET TEXT, FONT AND ANGLE AND
    // DRAW THE TEXT...

    testi.setMap(map);

Answer 1

听起来你会想要使用MarkerWithLabel

function initMap(lat, lon){

    var address = new google.maps.LatLng(lat, lon);
    var figureLabel = document.createElement('Figure');
    var pictureLabel = document.createElement('img');
    pictureLabel.src = "../icons/custom_map_marker.png";
    var caption = document.createElement('FIGCAPTION');
    label = " :) ";
    var text = document.createTextNode(label);

    figureLabel.appendChild(pictureLabel);
    figureLabel.appendChild(caption);

    var map = new google.maps.Map(document.getElementById('LocationMap'), {
        zoom : 17,
        center : address,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    marker = new MarkerWithLabel({
        position : address,
        map : map,
        labelContent : figureLabel,
        labelClass : 'Label',
        labelAnchor : new google.maps.Point(65, 83)
    });

}

是我过去用过的东西。

您会注意到标签被分类在对象实例化的第四行：labelClass 在相应的 CSS 中，您应该使用 transform 来适当地调整它的角度。当然你会想在这里使用 JQuery，比如$('.Label').css('transform','rotate('+yourAngle+'deg)')

对于坐标，不使用参数，只使用给定的两个坐标。所以

var address = new google.maps.LatLng(object.eatures[0].geometry.coordinates[0],object.features[0].geometry.coordinates[1])

Answer 2

一种选择是在加载 GeoJson 时使用“addfeature”事件处理它，然后使用第三方 InfoBox library在地图上显示文本

1. 您的 GeoJson 坐标或地图中心坐标向后。

center: new google.maps.LatLng(44.4878559081156,9.76673954155489),

"coordinates":[44.4878559081156,9.76673954155489]

google.maps.LatLng 的坐标顺序为 Latitude,Longitude，GeoJson 的顺序相反。

1. 要在加载 GeoJson 时“处理”它，请在 Data addFeature 事件上使用事件侦听器：

map.data.addListener('addfeature', function(evt) {
  if (evt.feature.getGeometry().getType() == "Point") {
    var coord = evt.feature.getGeometry().get();
    var labelText = evt.feature.getProperty("text");
    var labelFontSize = evt.feature.getProperty("Font") + "px";
    var labelAngle = evt.feature.getProperty("Angle");
  // ...

1. 旋转文本，来自这个相关问题的代码：Show Value next to line in google maps

 var labelText = "4.32";
 var labelDiv = document.createElement("div");
 labelDiv.innerHTML = labelText;
 labelDiv.setAttribute("id", "label");
 labelDiv.setAttribute("style", "-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);     transform: rotate(45deg);");

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(44.4878559081156, 9.76673954155489),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  map.data.addListener('addfeature', function(evt) {
    if (evt.feature.getGeometry().getType() == "Point") {


      var coord = evt.feature.getGeometry().get();
      var labelText = evt.feature.getProperty("text");
      var labelFontSize = evt.feature.getProperty("Font") + "px";
      var labelAngle = evt.feature.getProperty("Angle");
      var labelDiv = document.createElement("div");
      labelDiv.innerHTML = labelText;
      labelDiv.setAttribute("id", "label");
      labelDiv.setAttribute("style", "-ms-transform: rotate(" + labelAngle + "deg); -webkit-transform: rotate(" + labelAngle + "deg);     transform: rotate(" + labelAngle + "deg);");

      var myOptions = {
        content: labelDiv,
        boxStyle: {
          border: "none",
          textAlign: "center",
          fontSize: labelFontSize,
          width: "50px"
        },
        disableAutoPan: true,
        pixelOffset: new google.maps.Size(-25, 0),
        position: coord,
        closeBoxURL: "",
        isHidden: false,
        pane: "mapPane",
        enableEventPropagation: true
      };

      var ibLabel = new InfoBox(myOptions);
      ibLabel.open(map);
    }
  });

  map.data.addGeoJson(geoJson);
  map.data.setMap(null);

}
google.maps.event.addDomListener(window, "load", initialize);

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "text": "Street Foo",
      "Font": "25",
      "Angle": "30.99999"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [9.76673954155489, 44.4878559081156]
    }
  }]
};

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>