如何在Google Maps API中設置數據層功能標籤的樣式？

我有這個工作的js代碼：如何在Google Maps API中設置數據層功能標籤的樣式？

var p; 
p = new google.maps.Data(); 
p.loadGeoJson('http://mysource.example.com'); 
p.setStyle(function(feature){ 
    var icon = feature.getProperty('icon'); 
    var title = feature.getProperty('title'); 
    return { 
     icon: icon, 
     label: title 
    } 
}); 
p.setMap(map);

的代碼生成的輸出：

：

如何設置標籤「L1PIAZZA」的風格？

來源

2016-11-24 kiks73

使用文件屬性來風格的MarkerLabel：

屬性

顏色類型：字符串

標籤文本的顏色。默認顏色是黑色。

fontFamily中類型：字符串

的字體系列標籤文本（等效於CSS font-family屬性）的。

fontSize的類型：字符串

標籤文本（等效於CSS font-size屬性）的字體大小。默認大小是14px。

fontWeight設置類型：字符串

字體粗細標籤文本（等效於CSS font-weight屬性）。

文本類型：字符串

的文本，顯示在標籤中。

p.setStyle(function(feature) { 
    var icon = feature.getProperty('icon'); 
    var title = feature.getProperty('title'); 
    return { 
    icon: { 
     url: icon, 
     labelOrigin: new google.maps.Point(15, -10) 
    }, 
    label: { 
     color: "blue", 
     fontFamily: "Courier", 
     fontSize: "24px", 
     fontWeight: "bold", 
     text: title 
    } 
    } 
});

proof of concept fiddle

代碼片斷：

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var p; 
 
    p = new google.maps.Data(); 
 
    p.addGeoJson({ 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
     "type": "Feature", 
 
     "properties": { 
 
     "icon": "http://maps.google.com/mapfiles/ms/micons/blue.png", 
 
     "title": "blue", 
 
     }, 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [-122.1419, 37.4419] 
 
     } 
 
    }] 
 
    }); 
 
    p.setStyle(function(feature) { 
 
    var icon = feature.getProperty('icon'); 
 
    var title = feature.getProperty('title'); 
 
    return { 
 
     icon: { 
 
     url: icon, 
 
     labelOrigin: new google.maps.Point(15, -10) 
 
     }, 
 
     label: { 
 
     color: "blue", 
 
     fontFamily: "Courier", 
 
     fontSize: "24px", 
 
     fontWeight: "bold", 
 
     text: title 
 
     } 
 
    } 
 
    }); 
 
    p.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

來源

2016-11-25 03:38:54 geocodezip

如何在Google Maps API中設置數據層功能標籤的樣式？

回答

相關問題