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

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

ただいまの
回答率

88.77%

GoogleMapAPIでオリジナルの画像を使用するとき、x座標がマイナスになる部分が表示されない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 942

koridentetsu

score 14

発生しているエラー

下記のアドレスでGooglemapAPIを利用して、オリジナルの地図(架空地図)を、スクロールしたり拡大縮小したりできるようなページを作っていたのですが、
http://souzoumap.webcrow.jp/Smap/gmap3/

一昨日ごろから、突如として、x座標がマイナスになる部分が表示されなくなるエラーが発生しました。
(y座標がマイナスになる部分は、表示されています)

なお、サーバーを確認しましたが「x座標がマイナスになる部分の画像」はきちんと存在しています。

どのように対処すれば、表示されるようにできるでしょうか?
マイナスになる部分が表示されないのはx座標に関してのみで、y座標がマイナスになる部分については表示されています。xとyでこのような差違が生じた理由は何でしょうか?

また、このエラーとは無関係ですが、最初にページを読み込んだときに表示される位置を変えることはできるでしょうか?
スクリプトの側の (85.0511287798066,-180) という値をいじってもうまくいきませんでした。

タグは、以下です。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>想像地図(城栄国)スクロールマップ</title>
  <link rel="stylesheet" type="text/css" href="index.css" />
  <script type="application/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
  <script type="application/javascript" src="index.js"></script>
</head>
<body>
   <div id="map_canvas">
   地図を読み込んでいます。1分以上待っても表示されない場合は JavaScript を有効にしてください。
   もしくは <a href="http://souzoumap.webcrow.jp/Maps/Maps.HTM">想像地図をPDF・PNGでみる</a>
 </div>
google.maps.event.addDomListener(window, "load", function () {
  var oMapCanvas = document.getElementById("map_canvas");

  // Custom Map Tile Layer
  var customMapType = new google.maps.ImageMapType({
    name: "道路",
    tileSize: new google.maps.Size(1681, 2377),
    isPng: true,
    maxZoom: 17, //最大詳細
    minZoom: 16, //最小広域
    getTileUrl: function(coordinate, zoom) {
      var zoom = zoom; //いま追加
      var x = coordinate.x >> 0; // 初期位置をプラスで右へ ※ズーム位置がずれるので使わない
      var y = coordinate.y >> 0; // 初期位置をマイナスで上へ ※ズーム位置がずれるので使わない

      return "../tile_" + zoom + "/jm_" + zoom + "_" + y + "_" + x + ".png"
       .replace("%zoom", zoom.toString())
       .replace("%x", x.toString())
       .replace("%y", y.toString());
    }
  });
  var map = new google.maps.Map(oMapCanvas, {
    zoom: 17, //最初に表示したときのズームレベル (17→5万, 16→10万, 15→20万)
    center: new google.maps.LatLng(85.0511287798066,-180),
    disableDefaultUI: true,
    panControl: true,
    mapTypeId: customMapType.name
  });
  map.mapTypes.set(customMapType.name, customMapType);

  google.maps.event.addListener(map, 'zoom_changed', function() {//
    dispLevel(map.getZoom());//
  });//

  function dispLevel(level) {
  document.getElementById("zoomlevel").innerHTML = "<img src ='scale" + map.getZoom() + ".PNG'>; " + "<BR>" + "地図データ &#169; " + "想像地図研究所".link("http://www27.atpages.jp/souzoumap/Maps/Maps.HTM");
  }

  // Map tile license
  var copyrightDiv = document.createElement("div");
  copyrightDiv.style.fontSize = "10px";
  copyrightDiv.style.whiteSpace = "nowrap";
  copyrightDiv.style.padding = "0 6px";
  copyrightDiv.style.backgroundColor = "rgba(245, 245, 245, 0.70)";
  var copyrightSpan = document.createElement("span");
  copyrightSpan.setAttribute("id", "zoomlevel");
  copyrightSpan.setAttribute("style", "color: #444;");
  copyrightSpan.innerHTML = "<img src ='scale" + map.getZoom() + ".PNG'>; " + "<BR>" + "地図データ &#169; " + "想像地図研究所".link("http://souzoumap.webcrow.jp/Maps/Maps.HTM");
  copyrightDiv.appendChild(copyrightSpan);
  map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(copyrightDiv);
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

マイナス座標が無いから。左上が0,0になります。

【タイルレイヤー  |  Google Maps SDK for iOS  |  Google Developers】
https://developers.google.com/maps/documentation/ios-sdk/tiles?hl=ja

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/17 16:29 編集

    左上が(0,0)になるのは理解しています。
    同じマイナスでも、xだけが表示されず、yは表示される理由が分かりません。
    (-1,0) は表示されていませんが、(0,-1)は表示されているのです。

    なお、数日前までは(-1,0)が表示されており、突如として表示されなくなりました。
    ここ数日間の間に仕様変更があったのでしょうか?

    キャンセル

  • 2018/02/17 21:10

    コードを読んでいませんでした、すみません。
    とりあえず「エラー」では何が起こっているかわからないので、変数にどういう値が入っていてそれが期待通りにURLに置き換えられているかを確認してみてはいかがでしょう。

    キャンセル

  • 2018/02/17 21:50

    確かめてみたところ、yに関してはマイナスの値が正しく入っていたのですが、xは-1となるはずのところが9000を越える正の値がランダムに入っていました。従いましてこのことが原因でxがマイナスの側が表示されていないようです。
    なぜそういう値になるのかは分かりませんでした。

    キャンセル

  • 2018/02/17 23:14

    身も蓋もない対処法ですが、xがマイナスにならないように画像の番号を変更する、という方法が、最も無難な対処法みたいですね。

    ご回答ありがとうございました。

    キャンセル

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

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る