XMLをGoogleMAP APIに読み込めません。

xmlファイルをGoogleMapに読み込ませようと試したができませんでした。

javascript
1
2function DataXML(){
3
4var text, parser, xmlDoc, ddd,b,c;
5text = 
6'<response>\n\
7<header module="QueryLlistaEQ" operation="getLlistaEQ" session=""/>\n\
8<body idioma="CA">\n\
9.......
10</body>\n\
11</response>';
12
13var parser = new DOMParser();
14var  xmlDoc = parser.parseFromString(text,"application/xml");
15  var googleMap = xmlDoc.getElementsByTagName('googleMaps')[0];
16  var b = googleMap.attributes.lat;
17  var c = googleMap.attributes.lon;
18 return xmlDoc;
19}
20var ddd = DataXML();
21
22
23function initMap() {
24
25  var map = new google.maps.Map(document.getElementById('demo'),{
26        zoom: 12,
27        center: new google.maps.LatLng(41.409651, 2.183685),
28        mapTypeId: google.maps.MapTypeId.ROADMAP
29     });
30     
31     var eee =  new Number(ddd);
32     var latLng = new google.maps.LatLng(eee.b,eee.c);
33     
34     var marker = new google.maps.Marker({
35         position: latLng,
36         map: map,
37         
38    });
39}
40

Lhankor_Mhy

2019/07/01 00:52

変数googleMaps の中身をご提示ください。

m.ts10806

2019/07/01 01:43

https://teratail.com/help/question-tips#questionTips3-4

Lhankor_Mhy

2019/07/01 02:30 編集

質問編集拝読。 typoです。 return = xmlDoc; ↓ return xmlDoc; あと、これ、関数httpGet を呼び出していないようですけれど、コピペ間違ってないですか？

Lhankor_Mhy

2019/07/01 02:31

質問編集拝読。しかしやはり、関数httpGet を呼び出していないようです。繰り返しになりますが、コピペ間違ってないですか？

ni7035

2019/07/01 02:35

間違っていると思います。

Lhankor_Mhy

2019/07/01 02:38

なるほど。では、正しくコピペしてご提示いただけますか？

ni7035

2019/07/01 02:55

修正しました。

Lhankor_Mhy

2019/07/01 03:11

質問編集拝読。複数の間違いが確認されます。とりあえず、列挙して回答しますね。

行動規範の内容に同意します

回答2件

ベストアンサー

parser.parseFromString()の第1引数はパスではなくて、テキストデータです。

解決方法ですが、textにXMLのテキストデータを入れてください。

非同期通信なので、DataXML()が実行されるまでにXMLの受信が終了しないと思います。

解決方法ですが、xhttp.onreadystatechangeに書いてください。

googleMapsに入っているのは、おそらく[XMLDocument](>XMLDocument - Web APIs | MDN XMLDocument - Web APIs | MDN)です。なので、.latというプロパティはありません。

解決方法ですが、DOM API を使って参照してください。

質問の編集にあわせて追記

parseFromString(text,"data/xml")ですが、data/xmlというMIMETYPEは不適切だと思います。

application/xmlにしてみてください。

getElementsByTagName('lat')ですが、latというタグはないようです。

おそらく、getElementsByTagName('googleMaps')の間違いかと思います。

getElementsByTagName()はHTMLCollectionを返します。

そのため、hoge[0]などのように添え字をつけるなどしてアクセスする必要があります。

そしてhoge[0]はElementです。この場合、<googleMaps lat="41.359684477777776" lon="2.145138777777778"/>などが入っています。

この要素の属性を得るにはattributesプロパティにアクセスする必要があります。.attributes.latなどとしてみてください。

new google.maps.LatLng()ですが、引数は数値です。

そのため、Numberなどを利用する必要があります。

質問の編集にあわせて追記2

var b = googleMap.attributes.lat;ですが、varで宣言された変数は、その関数の中にスコープを持ち外からは参照できません。この場合、DataXML()の外側からは参照できないということです。
return xmlDoc;ですが、xmlDocは変更を加えられていませんので、返ってくるのはXML全体のXMLDocumentです。これは想定と異なるのでは。
new Number(ddd);ですが、上のコメントのとおりです。Number(文字列)とすることで、数値化できます。この場合、dddに入っているのはxmlDocですから、文字列ではありません。
eee.bですが、3のとおりeeeには期待しているものが入っていません。また、1のとおり、プロパティのように参照できるものでもありません。

開発者ツールを見て、エラーメッセージを読み、console.logなどを使って、変数に入っている値とその構造を確認しながらコーディングを進めるべきです。

コメントを受けて追記

js
1function DataXML(){
2
3  var text, parser, xmlDoc;
4  text ='...';
5
6  var parser = new DOMParser();
7  var  xmlDoc = parser.parseFromString(text,"application/xml");
8  return xmlDoc.getElementsByTagName('googleMaps');
9}
10
11var googleMaps = DataXML();
12var lat = Number( googleMaps[0].attributes.lat.value );
13var lon = Number( googleMaps[0].attributes.lon.value );
14
15function initMap() {
16
17  var map = new google.maps.Map(document.getElementById('demo'),{
18        zoom: 12,
19        center: new google.maps.LatLng(41.409651, 2.183685),
20        mapTypeId: google.maps.MapTypeId.ROADMAP
21     });
22
23     var latLng = new google.maps.LatLng(lat,lon);
24
25     var marker = new google.maps.Marker({
26         position: latLng,
27         map: map,
28
29    });
30}

こちらだとどうなりますか？

投稿2019/07/01 03:15

編集2019/07/08 09:15

Lhankor_Mhy

総合スコア36115

ni7035

2019/07/01 03:35

XMLのテキストデータとは、data.xmlファイルに書かれているすべてのデータのことですか？

Lhankor_Mhy

2019/07/01 03:51

ん？ data.xmlファイルを読み込むのですか？もしかすると、勘違いしてたかもしれないですね。 XMLHttpRequest() を使っていたので、てっきり、http://w10.bcn.es/APPS/asiasiacache/peticioXmlAsia?id=204 にあるデータを読み込むのかと思っていました。その部分は関係のないコードなのでしょうか？もし、そうであるなら、「XMLのテキストデータとは、data.xmlファイルに書かれているすべてのデータのことですか？」の答えは、「はい」です。

ni7035

2019/07/01 04:24

http://w10.bcn.es/APPS/asiasiacache/peticioXmlAsia?id=204 からデータを読み込みたいと思っています。　 http://w10.bcn.es/APPS/asiasiacache/peticioXmlAsia?id=204の中にあるデータをdata.xmlに保存しています。

Lhankor_Mhy

2019/07/01 04:27

なるほど。では、やはり、XMLHttpRequest() の部分のコードは関係がないのですね。であれば、答えは「はい」です。変数textにdata.xmlのテキストデータを入れてください。

ni7035

2019/07/01 04:44

text = '/home/ec2-user/enviroment/XML/data.xml'; ここの部分ですが、絶対パスでもいいんですか？

Lhankor_Mhy

2019/07/01 04:46

いえ、変数textにはdata.xmlのテキストデータを入れるべきです。パスではありません。

Lhankor_Mhy

2019/07/01 06:24 編集

コメントを見る限り、なにか勘違いをされているのではないか、と思いました。ブラウザで実行される JavaScript は、サーバ側でもクライアント側でも、ローカルファイルに直接アクセスすることはできません。リクエストをしてそのレスポンスを処理する必要があります。 /home/ec2-user/enviroment/XML/data.xml というパスは、サーバ側のパスのように見えます。であれば、そのパスをweb上で公開できるように設定し、ブラウザの JavaScript からリクエストをしてデータを取得する、という方法をおすすめします。余計なお世話かもしれませんが老婆心ながら。的外れでしたら失礼をいたしました。

ni7035

2019/07/01 08:32

丁寧に教えてくださりありがとうございます。処理の順番はXMLHttpRequestでhttpから受け取ったテキストデータをパースする。そのパースされたテキストデータをマップに読み込む。これであってますか？ XMLDocumentとは、XML のドキュメントへの読み込み、検証、編集、追加、および配置が可能にするclassのことですか？

Lhankor_Mhy

2019/07/01 09:17

はい、概ねそんな感じだと思います。

Lhankor_Mhy

2019/07/01 10:27 編集

参考になりそうなページを挙げておきます。 http://www4.airnet.ne.jp/hasikun/webtech/ajax/ajax102.html ↑ちょっと情報が古いので気をつけてください。もしかするとそのままでは動作しないかもです。 https://qiita.com/tom_konda/items/5e9824b38842615c9df1 ↑ファイル取得部分は今回のケースと違うのでスルーしてください。parseFromString で XMLDocument オブジェクトを得た後の処理が参考になると思います。

ni7035

2019/07/01 11:47

ありがとうございます。質問なのですが、変数textにdata.xmlのテキストデータを入れてる際に、<response>から</response>までですか？それとも<equipaments>から</equipaments>ですか？

Lhankor_Mhy

2019/07/01 11:50

どちらでもかまわないと思いますが、切り取る範囲を間違えるとパースエラーが出ますので、全部まるっとやってしまった方が余計なエラーに悩まなくてラクかと思います。

ni7035

2019/07/02 12:26

変数textにdata.xmlのテキストデータ全てを入れました。最初と最後にシングルクォーテーションをつけました。ですがUncaught SyntaxError: Invalid or unexpected tokenのようなエラーがありました。 https://www.w3schools.com/xml/xml_parser.aspのように、データを+で繋げる必要があるのでしょうか。

Lhankor_Mhy

2019/07/03 00:44

そうですね。なお、以下のような書き方もあります。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings#%E8%A4%87%E6%95%B0%E8%A1%8C%E6%96%87%E5%AD%97%E5%88%97 下段の方は、IE11が対応していないと思います。

ni7035

2019/07/03 08:56

ありがとうございます。今知ったのですが、httpsではなくhttpはブロックされるみたいです。 xhttp.open("GET", Access-Control-Allow-Origin: http://w10.bcn.es/APPS/asiasiacache/peticioXmlAsia?id=204 , true); これでもエラーが出ました。解決策は、あるのでしょうか？

Lhankor_Mhy

2019/07/03 09:32

解決策はないと思います。変数textにdata.xmlの内容を入れているのあれば、xhttp.open は不要かと思うのですが、これは何をしているのですか？

Lhankor_Mhy

2019/07/03 09:51

誤解があるようなのでまとめますね。目的を達成する手段は2つあります。 ① ソースコードに data.xml の内容を直接書き込む ② data.xml をインターネットから参照可能な場所において、XMLHttpRequest で自分のサーバに対してリクエストをし、XMLを取得する 2019/07/02 21:26 のコメントから、①の手段をとっている、と私は理解していました。その場合、XMLHttpRequest は不要です。 2019/07/03 17:56 のコメントでは、XMLHttpRequest で自分のサーバ**以外**のサーバにリクエストをしているように見えます。これは①でも②でもなく全く別の方法です。そして、相手方サーバの許可がなければできません。許可がなければ、セキュリティの関係上、JavaScriptでできる解決策はないと考えた方がいいです。

Lhankor_Mhy

2019/07/04 01:04

質問編集拝読。追記しました。

ni7035

2019/07/04 06:18

５、new google.maps.LatLng()ですが、引数は数値です。そのため、Numberなどを利用する必要があります。これは、どういうことですか？

Lhankor_Mhy

2019/07/04 06:22 編集

すみません、リンク先がわかりにくかったようです。文字列を数値に変換する、ということです。 ↓この部分です。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#%E6%95%B0%E5%AD%97%E3%82%92%E6%95%B0%E5%80%A4%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B

Lhankor_Mhy

2019/07/04 06:26

質問編集拝読。ちょっとお待ちください。

Lhankor_Mhy

2019/07/05 09:28

追記しました。

ni7035

2019/07/08 03:13

では、 var b = googleMap.attributes.lat; var c = googleMap.attributes.lon;をfunction DataXML(){｝の外に書くということですか？

Lhankor_Mhy

2019/07/08 03:18

そうですね。これは、私が「こうじゃないかな？」と思うコードを書いたほうが話が早いですかね？

ni7035

2019/07/08 03:26

そうしてもらえると嬉しいです。

Lhankor_Mhy

2019/07/08 09:16

追記しました。

ni7035

2019/07/08 09:51

実行してみると、テキストデータの初めのlatとlonの１件しか取得できませんでした。

Lhankor_Mhy

2019/07/08 09:53

そうですね、そのように書きました。なので、ループを回せばいいかと思いますよ。

ni7035

2019/07/11 03:57

ループさせることができました。丁寧に教えていただきありがとうございました。

Lhankor_Mhy

2019/07/11 04:14

ご解決されて何よりです。

行動規範の内容に同意します

function DataXML(){

var text, parser, xmlDoc;
text ='データを入力';

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(text,"application/xml");

return xmlDoc.getElementsByTagName('googleMaps');
}

var googleMaps = DataXML();

function initMap() {

var map = new google.maps.Map(document.getElementById('mapa'),{
zoom: 12,
center: new google.maps.LatLng(北緯lat, 経緯lon),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

for ( var i = 0; i < googleMaps.length; i++ ) {
var lat = Number( googleMaps[i].attributes.lat.value );
var lon = Number( googleMaps[i].attributes.lon.value );
var latLng = new google.maps.LatLng(lat, lon);

var marker = new google.maps.Marker({
  position: latLng,
});
marker.setMap(map)

}

投稿2019/07/11 04:00

ni7035

総合スコア11

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！