Leaflet Javascriptのツールチップがいい感じに出来たので、グレートサークルラインがかんたんなので、GoogleMapを使ってるアプリで同じようなこと出来ないか調べてみたところ、
Google語では、Labelのようで、調べて実装してみました。
ここで教えて頂きました。
< コード例 >
マーカーのプロパティに label をセットします。
// 空港IATAラベル //
let label = new google.maps.Marker({
position: latlng,
map: this.map,
icon: {
url: '',
size: new google.maps.Size(1, 1),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, -12), // //左に0px、下に12px テキストはセンター
},
label: {
text: this.poptxt,
color: '#ffff00',
fontFamily: 'sans-serif',
fontWeight: 'bold',
fontSize: '14px'
}
});
// 中央上ラベル //
DrawMapG.nclabel = new google.maps.Marker({
position: nclatlng,
map: mapThis,
icon: {
url: '',
size: new google.maps.Size(1, 1),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, -12), // //左に0px、下に12px テキストはセンター
},
label: {
text: this.nctxt,
color: '#ffffff',
fontFamily: 'sans-serif',
fontWeight: 'bold',
fontSize: '14px'
}
});
// 中央下ラベル //
DrawMapG.sclabel = new google.maps.Marker({
position: sclatlng,
map: mapThis,
icon: {
url: '',
size: new google.maps.Size(1, 1),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 30), // //右に0px、上に30px テキストはセンター
},
label: {
text: this.sctxt,
color: '#ffffff',
fontFamily: 'sans-serif',
fontWeight: 'bold',
fontSize: '14px'
}
});
< 画面例 >
|
|
|