Google Maps API draw a text from GeoJSON point geometry

问题

I've got geoJSON data like this:

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

I would like to draw a text "Street Foo" with Font size 25 and 0.999 radiant angle inclination with Google Maps API.

I tried this:

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

回答1:

One option would be to process the GeoJson as it is loaded using the "addfeature" event, then displaying the text on the map using the third party InfoBox library

1. either your GeoJson coordinates or your map center coordinates are backwards.

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

"coordinates":[44.4878559081156,9.76673954155489]

a google.maps.LatLng has its coordinates in the order Latitude,Longitude, GeoJson is in the opposite order.

2. to "process" the GeoJson as it is loaded use an event listener on the Data addFeature event:

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");
  // ...

3. to rotate the text, code from this related question: 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

code snippet:

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>

回答2:

Sounds like you will want to be using 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)
    });

}

Is something that I've used in the past.

You'll note that the label is classed on the fourth line of the object's instantiation: labelClass In your corresponding CSS, you should use transform to angle it appropriately. Of course you'll want to use JQuery here, so something like $('.Label').css('transform','rotate('+yourAngle+'deg)')

For the coordinates, instead of using parameters, just use the two coordinates given. So

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

来源：https://stackoverflow.com/questions/34418535/google-maps-api-draw-a-text-from-geojson-point-geometry