幼稚園時代「何組」でしたか？

詳しい人求む！

javascript 配列の値により結果を変更したい

解決済

  • 質問者：motinorax
  • 質問日時：
  • 回答数：4件

https://ghweb.info/post-3762.html　を真似てhttp://tonndemonai.starfree.jp/test-32f.htmlを作りました．配列dataは　見出し var title = new Array();
緯度 var lat = new Array();
軽度 var lng = new Array();
説明 var cont = new Array();
　アルファベット文字　var ico = new Array();　です．
　icoの文字種によりマーカーの種類を変えたいのですが，上手く行きません．
　（icoの値が配列順にかかわらず　aの時はn1.png，bの時はn2.png　という風に；20種程度）
ご教示ください．

質問者からの補足コメント

  • スクリプト全部の記載を試みましたが文字数制限のため出来ません．ご面倒ですがソースをみていただけたらと思います．
    arrayのdataはmap34.jsonに格納されており，下記の配列にしたがっています．
    [　
    ["タイトル1","35.3877152","132.9596206","説明1","a"],
    ["タイトル２,"35.3247548","133.0021602","説明2","b"],
    ["タイトル３","35.417624","133.4059251","説明3","c"]　
    ]
    ｽｸﾘﾌﾟﾄ中， ico[i]= markers[i][4];で　配列最後の文字（a,b,c）を抽出している（つもり）
    以降，aの時は画像1，bの時は画像2　をﾏｰｶｰとして表示したいと考えています．
    具体的表記をご教示いただければ幸いです．

    No.1の回答に寄せられた補足コメントです。 補足日時：2019/06/27 15:52
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

（つづきです）


No1にも記しましたが、当方にちゃんとした利用環境が無いため十分な検証はできていませんが、何かのご参考にでもなれば・・・

※ 投稿しようとして気付きましたが、データ部分のurl文字列が、この掲示板では全てリンクに変更されてしまうので、無駄に分割してあります。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>sample</title>

<style type="text/css">
body { background-color: #ffffff; }
body * { margin:0; padding:0; }
#map_box { width:900px; margin:0 auto; }
#map_canvas { width:700px; height:700px; float:left; }
#marker_list { list-style-type:none; width:190px; float:right; }

#marker_list li {
display:block; width:100%;
margin-bottom:10px; padding:10px;
color:#000; text-decoration:none;
font-size:16px; background-color: #EEE;
border:1px solid #ccc;
border-color: #ccc #666 #666 #ccc;
}

.infoWindow img { width:200px; height:auto; border:none; }
.infoWindow span{ font-size:16px; font-weight:bold; }
.infoWindow a { font-size:12px; }
</style>

<!-- map api を正しく読込む必要があります -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …

<script type="text/javascript">
function initialize(map, list){
//◇マーカー作成
function createMarker(marker){
let mark = new google.maps.Marker(marker);
mark.setMap(mapCanvas);
google.maps.event.addListener(mark, "click", function(){showInfo(marker);});
}

//◇サイドリスト追加
function addSideList(marker){
let li = document.createElement("li");
li.innerHTML = marker.type + ": " + marker.title;
markerList.appendChild(li);
google.maps.event.addDomListener(li, "click", function(){showInfo(marker);});
}

//◇インフォウィンドウ表示
function showInfo(marker){
infoWnd.setOptions(marker);
infoWnd.open(mapCanvas);
}

//■マーカー用データ
const markerData = [
{lat:32.8063, lng:130.7058, title:"熊本城",
type:"A", iconD:"AAA|14|b|%E5%9F%8E",
href:"htt"+"ps://kumamoto-guide.jp/kumamoto-castle/",
img:"htt"+"ps://kumamoto-guide.jp/files/906dc232-d6b6-48a1-9b74-4c9ba4f949bc_m.jpg?1561577442"
},
{lat:32.7907, lng:130.7342, title:"水前寺成趣園",
type:"B", iconD:"7F7|14|b|%E5%BA%AD",
href:"htt"+"p://www.suizenji.or.jp/",
img:"htt"+"p://kumanago.jp/shugaku/files/cache/0df95f560dac2e7c9eac2cd5af3f61cc_1455585334.jpg"
},
{lat:32.8352, lng:130.6378, title:"草枕の道",
type:"C", iconD:"EF7|14|b|%E9%81%93",
href:"htt"+"ps://www.city.tamana.lg.jp/q/aview/398/2092.html",
img:"htt"+"ps://kumamoto-guide.jp/files/643b5887-9d52-4656-9ee9-d43a43b41e6a_xl.jpg?1561577523"
},
{lat:32.7848, lng:130.7552, title:"健軍神社",
type:"D", iconD:"FDD|14|b|%E7%A4%BE",
href:"htt"+"ps://kumamoto-guide.jp/spots/detail/33",
img:"htt"+"ps://kumamoto-guide.jp/files/564f56c3-33fb-4fd3-8ae1-65e8b3f39a1f_m.jpg?1561577438"
}
];


// 変数設定
var mapCanvas = new google.maps.Map(document.getElementById(map));
mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var bounds = new google.maps.LatLngBounds();
var infoWnd = new google.maps.InfoWindow();
var markerList = document.getElementById(list);

// マーカオブジェクトを作成
const iconUri = "htt"+"ps://chart.googleapis.com/chart?chst=d_map_spin&chld=0.8|0|";
for(let i=0, marker; marker=markerData[i++];){
marker.position = new google.maps.LatLng(marker.lat, marker.lng);
bounds.extend(marker.position);
let content = '<div class="infoWindow"><span>' + marker.title + '<' + '/span><br>';
content += '<a href="' + marker.href + '"><img src="' + marker.img + '"><br>';
content += '詳細を開く<' + '/a><' + '/div>';
marker.content = content;
　　marker.icon = iconUri + marker.iconD;

createMarker(marker); // マーカー作成
addSideList(marker); // サイドバーへ追加
}

// マップを表示
mapCanvas.fitBounds(bounds);
}

google.maps.event.addDomListener(window, "load", function(){
initialize("map_canvas", "marker_list")
});

</script>

</head>
<body>

<div id="map_box" >
<div id="map_canvas" align="left"></div>
<ul id="marker_list"></ul>
</div>


</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます．この週末に実装し渡来させて頂きます．重ねてご厚意に感謝いたします．
ありがとうございました．

通報する
お礼日時：2019/06/28 18:53

No.3

  • 回答者： fujillin
  • 回答日時：

No2です



ご提示のサイトの内容は把握していませんので、多分、具体的には違う方法になっていると思いますが、似たようなものを簡易的に比較的コンパクトなものとして作成してみました。
　・マーカー毎に表示するアイコンが違うようにしてあります。
　・アイコンデータは読替えせずに直接元のデータに記す方式にしました。
　（タイトルやURLなどと同じ扱いです）
　・実際のiconには、No1でご紹介したdynamic iconを利用して、
　　漢字一文字付きのマーカにしています。
　　（ですので、直接のURLではないため、読替えと似たような変換処理を行っています）

マーカのオブジェクトに、map apiのオプション指定と同じ属性を持たせておくことで、API利用時のオプション変数としてそのまま利用できるようにしています。
このようにしておくと、例えば、インフォウィンドウの内容を書き換える際に
　infoWnd.setOptions(marker);
だけで設定が済んでしまうので楽ちんです。

何かに使えるかと思って、ご質問に似せてTYPEデータとしてA,B,C…を設定しましたが、urlも含めてデータに入れてしまったため、利用する場面がありませんでした。
捨ててしまうのも忍びないので、リスト表示の際に意味もなく利用しています(笑)

※　全文入れると、文章と合わせて若干の「文字数オーバー」になってしまいましたので、ソースのみ別投稿いたします。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

No1です。



あれだけ複雑なスクリプトを作成しておられるのですから、難しいことは無いと思うのですが・・・

どこがわからないのかが、よくわかりませんが、
1）補足でご提示のjson（というより2次元配列ですが）のa,b,cを読み替えたい
2）読み替えはできるけれど、マーカーへのセットがわからない

2）に関してはNo1に記しましたので、1）ということなのでしょうか！？
（あのサイトが作れれば、こんなの朝飯前では？）

もしも、1to1の読み替えなら読み替え等をせずに、元のデータに追記してしまうのが一番簡単だと思います。
1to1ではなく、マーカをタイプ分けしてタイプ毎に同じiconにしたいなどといった場合は、読み替えというよりは、タイプ別のiconデータを参照するといったイメージになるでしょうか。（処理内容としてはほとんど同じですが）

const iconData = {a:"画像1url", b:"画像2url", c:"画像3url", d,"画像4url"}
のような返還データを用意しておいて、ここにタイプを放り込めばurlが取得できます。
＞ ico[i]= markers[i][4];
であるなら、　iconData[ ico[i] ] といった感じで画像URLに変換できるでしょう。

もしも、1to1対応の場合は、
const iconUrl = {"画像1url","画像2url","画像3url","画像4url"}
でも十分で、直接インデックス値で照合してしえばよいですね。（この方が簡単）
markers[i] に対しては、iconUrl[i]を使えばよいということです。


※ ご質問内容がどこだかよくわからないので、勝手に決め打ちしてみましたが・・・「そこじゃないっ！」って言われるかも・・・
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます．やってみます．

通報する
お礼日時：2019/06/27 22:18

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



サイトをざっと見てもどこに何が記してあるのかわからないですし、解読して探すのも面倒なので、方法のみの回答です。

google mapは、使用制限を強めたので、テストで簡単に利用しにくくなったため、最近は使っていませんけれど、内容的な仕組みはさほど変わってはいないはずと思いますので・・・


＞coの文字種によりマーカーの種類を変えたいのですが
iconは自前の画像と考えて良いものと仮定します。
文字種を画像のurlに読み替えるのは簡単にできると思いますので、対象となるmarkerをセットする際にoptionでiconに画像urlを指定しておけば良いはずです。
https://developers.google.com/maps/documentation …

markerを作成して、後からセットしたければ、setIconメソッドでも可能です。
https://developers.google.com/maps/documentation …

以下は、googleが提供しているごく簡単なサンプルです。
https://developers.google.com/maps/documentation …

表示したいiconが標準の色違いなどで、文字種を（1文字）入れたものとかであれば、chatのdynamic iconを利用すると自前で画像を作らなくても表示が可能ですので、ご参考まで。（陰付きも可能）
（その他の色々なパターンのものも、もちろん利用可能です。）
https://developers.google.com/chart/image/docs/g …
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

説明も補足も不足で申しわけありません．それにもかかわらずご丁寧な回答ありがとうございました．
言葉で説明するより，ソースを見ていただく方が解るかなと勝手に思い込んでおりました．
まず，補足に付け加えさせて頂きます．

通報する
お礼日時：2019/06/27 14:39

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報