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

我得到的geoJSON数据如下：

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

我想用谷歌地图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);

---

听起来你会想使用

是我过去用过的东西

您会注意到标签在对象实例化的第四行被分类：

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

---

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

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

一个google.maps.LatLng的坐标顺序是纬度、经度，而GeoJson的顺序正好相反

要在加载GeoJson时“处理”它，请在

addFeature

事件上使用事件侦听器：

要旋转文本，请根据此相关问题编码：

代码片段：

var地理编码器；
var映射；
函数初始化（）{
变量映射选项={
缩放：14，
中心：新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（）=“点”）{
var coord=evt.feature.getGeometry（）.get（）；
var labelText=evt.feature.getProperty（“文本”）；
var labelFontSize=evt.feature.getProperty（“Font”）+“px”；
var labelAngle=evt.feature.getProperty（“角度”）；
var labelDiv=document.createElement（“div”）；
labelDiv.innerHTML=labelText；
labelDiv.setAttribute（“id”、“标签”）；
labelDiv.setAttribute（“样式”，“-ms变换：旋转（“+labelAngle+”度”）；-webkit变换：旋转（“+labelAngle+”度”）；变换：旋转（“+labelAngle+”度”）；”；
变量myOptions={
内容：labelDiv，
箱式：{
边界：“无”，
textAlign：“居中”，
fontSize:labelFontSize，
宽度：“50px”
},
是的，
pixelOffset:new google.maps.Size（-25,0），
职位：coord，
closeBoxURL:“”，
伊希登：错，
窗格：“地图窗格”，
enableEventPropagation:true
};
var ibLabel=新信息框（myOptions）；
ibLabel.open（map）；
}
});
map.data.addGeoJson（geoJson）；
map.data.setMap（空）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
var geoJson={
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“财产”：{
“文本”：“街富”，
“字体”：“25”，
“角度”：“30.99999”
},
“几何学”：{
“类型”：“点”，
“坐标”：[9.76673954155489，44.4878559081156]
}
}]
};
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

听起来不错，但如何从geoJSON点几何数据创建MarkerWithLabel？只需插入Address变量，并使用JQuery来调整Label类的角度即可。我已经编辑了我的答案，以展示如何。
var address = new google.maps.LatLng(object.eatures[0].geometry.coordinates[0],object.features[0].geometry.coordinates[1])

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

"coordinates":[44.4878559081156,9.76673954155489]

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