【最高300ポイント】再質問させて頂きます。Google Mapに自前の画像を表示させて、縮尺ボタンと連動させて拡大・縮小したいと考えています。JavaScriptのサンプルを教えていただけますか。宜しくお願いいたします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/10/02 01:47:23
  • 終了:2006/10/02 20:45:45

ベストアンサー

id:talepanda No.1

talepanda回答回数57ベストアンサー獲得回数122006/10/02 16:11:30

ポイント300pt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key="
	    type="text/javascript"></script>
    <script type="text/javascript">
      function TestOvy(){      // location and size, src
      this._x=139.7454;
      this._y=35.65872;
      this._w=0.001;
      this._h=0.001;
      this._src="tmp.jpg";
      }
      TestOvy.prototype = new GOverlay();
      TestOvy.prototype.initialize = function(map) {
      var div = document.createElement("img");div.style.backgroundColor = "pink";div.style.position = "absolute";div.src=this._src;
      map.getPane(G_MAP_MARKER_PANE).appendChild(div);this._div = div;this._map=map;
      }
      TestOvy.prototype.redraw = function(force){
      if (!force) return;
      var m=this._map,z=m.getSize(),s=m.getBounds().toSpan(),p=m.fromLatLngToDivPixel(new GLatLng(this._y,this._x));
      this._div.style.width=z.width*(this._w/s.lng())+"px";
      this._div.style.height=z.height*(this._h/s.lat())+"px";
      this._div.style.left=p.x+"px";
      this._div.style.top=p.y+"px";
      }
      function load() {
      if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(35.65872,139.7454), 16);
      map.addControl(new GLargeMapControl());
      map.addOverlay(new TestOvy());
      map.addOverlay(new GMarker(new GLatLng(35.65872,139.7454)));
      }
      }
    </script>
  </head>
  <body onload="load()" onunload="GUnload()"><div id="map" style="width: 500px; height: 300px"></div></body>
</html>

みたいな。

マーカーは確認のためにおいてるだけなので、外してもらってもおk

http://www.google.com

id:er7

ズバリですね。

回答が来ないと推測したので、自分で調べて強引に実装してみました。talepandaさんの実装のほうが良い気がします。ありがとうございます。

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.addControl(new GLargeMapControl());

map.addControl(new GScaleControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(35.05424, 137.161152), 14);

map.setMapType(G_NORMAL_MAP);

icon = new GIcon();

icon.image = "./tmp.jpg";;

icon.iconSize = new GSize(108 / (18 - 14), 142 / (18 - 14));

icon.iconAnchor = new GPoint(0, 0);

map.addOverlay(new GMarker(new GLatLng(35.05424, 137.161152), icon));

}

GEvent.addListener(map, 'zoomend',

function(oldZoomLevel, newZoomLevel) {

icon.iconSize = new GSize(108 / (18 - newZoomLevel), 142 / (18 - newZoomLevel));

map.clearOverlays();

map.addOverlay(new GMarker(new GLatLng(35.05424, 137.161152), icon));

2006/10/02 20:44:15
  • id:talepanda
    仰るとおりGMarkerのアイコンとzoomendイベントで強引にごにょごにょやるのもありかと思います。
    ただそれだと、余計なものが色々付いてきてややこしいかと。

    GMarkerも結局はGOverlayのサブクラスなので、直接GOverlayを使うほうが、中身を好き勝手弄れるので柔軟だと思いますよ。例えば動画を貼り付けるとかも出来ますしね。
  • id:er7
    なるほど。。。動画の貼り付けもできるのは面白いですね。弄り易いほうが楽しいと思いますし。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません