谷歌地圖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]}} 
       ] 
} 

我想繪製文本「街富」與字體大小25和0.999輻射的傾斜角度與Google Maps API。

我嘗試這樣做：

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

一種辦法是處理GeoJSON的，因爲它是使用「addfeature」事件時加載，然後使用第三方InfoBox library

1. 或者您的GeoJSON的座標或在地圖上顯示的文字你的地圖中心座標是向後的。

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

"coordinates":[44.4878559081156,9.76673954155489] 

一個google.maps.LatLng具有其在順序緯度座標，經度外，GeoJSON是以相反的順序。

到 「過程」 以GeoJSON，因爲它被裝載使用於DataaddFeature事件的事件監聽器：

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

代碼片段：

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>

Answer 2

聽起來像是你將要使用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])