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，因为它是使用＆＃34; addfeature＆＃34;事件，然后使用第三方InfoBox library

在地图上显示文字

您的GeoJson坐标或地图中心坐标都是向后的。

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

"coordinates":[44.4878559081156,9.76673954155489]

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

到＆＃34;过程＆＃34;加载的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");
  // ...

要旋转相关问题的文字和代码：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

代码段

＆＃13;

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]
    }
  }]
};

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: