件名: Re^5: プレイスマークのラベル名表示
記事No 892
投稿日 : 2018/01/23(Tue) 00:59:26
投稿者 あにねこ
参照先
高橋様、150pou.html を拝見しました。
この中で使われている js/tozan.js ですが、
これはアクセスカウンタの設置や Google Analytics のコードが入っていますので、

<script src="js/tozan.js"></script>

の箇所は、

<script>
function routemap(a) {
if (window.innerWidth < 650) {
window.open(a, "ROUTEMAP")
} else {
window.open(a, "ROUTEMAP", "width=800,height=600,resizable=yes")
}
return false
}
</script>

と変更するか、あるいは、ポップアップ窓を開かなくて良いならば、

onclick="return routemap(this.href)

を消去(その場合、上記の<script>〜</script>も不要)するよう、修正をお願いします。

文字色の変更についてですが、アイコンの種類が一つならば可能です。
(1) 150pou.kml の変更点
<Style id="なんとか">〜</Style> と <styleUrl>〜</styleUrl> などとなっている箇所を
全部削除。

(2) routemap.html の JavaScript の

var kml = new ol.layer.Vector({
source: new ol.source.Vector({
url: param.url,
format: new ol.format.KML()
})
});

の個所を次のように変更(画像ファイル、文字色などは適宜変更して下さい)。

var style = new ol.style.Style({
image: new ol.style.Icon({
size: [24, 24], // 用いる画像ファイルの画素数
src: 'symbols/Summit.png' // 用いる画像ファイルのURL
}),
text: new ol.style.Text({
font: 'bold 16px sans-serif', // ラベルのフォント、サイズを指定
fill: new ol.style.Fill({
color: 'blue' // ラベルの文字色を指定
}),
stroke: new ol.style.Stroke({
color: 'white', // ラベルの文字の縁取りの色を指定
width: 2 // ラベルの縁取りの太さを指定
})
})
});

var kml = new ol.layer.Vector({
source: new ol.source.Vector({
url: param.url,
format: new ol.format.KML({
defaultStyle: [style]
})
})
});

Placemarkの数は多くても大丈夫なはずですが、
もしかしたら <Style>、<styleUrl> の指定が関係していて、
削ったらうまくいくかも知れません。

関連スレッド

返信フォーム
おなまえ
eメール
タイトル
メッセージ
参照先
画像UP
暗証キー (英数字で8文字以内)
投稿キー (右画像の数字を入力) 投稿キー

- WebForum -