0

まず、私はJavascriptにかなり慣れていないので、私の質問がうまく出てこない場合は申し訳ありません。

ユーザーが電気代を計算できるように、Flashでアプリケーションを作成しています。次に、この図を取得してxmlファイルに書き込みます。

今、私はウェブページを開いてグーグルマップを表示しようとしています。マップ上に描かれた長方形があります。これは、以前に生成され、xmlファイルに保存された番号から動的に生成されます。

私はこれを達成する方法をオンにする場所について完全に迷っています。マップを自分のページに配置しました。希望どおりに100％拡大縮小されますが、動的な長方形の部分がまったくわかりません。正しい方向へのアイデアや指針は大歓迎です。

4

2 に答える 2

1

マップ上に長方形を配置したいだけの場合は、google.maps.Rectangleapi-docを作成できます。マップ上に長方形のラベルを作成する場合は、InfoBoxユーティリティライブラリのwikiページに興味があるかもしれません。

于 2012-05-21T18:22:28.390 に答える
1

この最新バージョンでは、XMLファイル

<countries>
  <country name="USA" lat="40.0" lng="-100.0" width="30.0"/>
  <country name="France" lat="46.6" lng="2.7" width="10"/>
  <country name="Germany" lat="51.1" lng="10.1" width="20"/>
</countries>

マップタイルの読み込みが完了するとすぐに読み込まれます。getProjectionタイルの読み込みが完了するのを待たないと、を正しく呼び出すことができませんでした。ドキュメントには、プロジェクションを取得するにはマップを初期化する必要があると記載されており、をリッスンすることをお勧めしprojection_changedます。どちらの方法でも機能しますが、tiles_loadedを聞く方が安全だと感じています。また、xmlの読み込みで問題が発生した場合、マップがかなりの量ズームまたはパンされると、再度呼び出されます。

  var map;
  var xmlLoaded = false;

  function initialize() {
    var mapOptions = { center: new google.maps.LatLng(30.0, 0.0), zoom: 2,
      mapTypeId: google.maps.MapTypeId.ROADMAP };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    google.maps.event.addListener(map, 'tilesloaded', loadData);
  }

  function loadData() {
    if(!xmlLoaded) {
     $.ajax({
      type: "GET",
      url: "co2data.xml",
      dataType: "xml",
      success: function(xml) {
        var countries = xml.documentElement.getElementsByTagName("country");
        for(var i = 0, country; country = countries[i]; i++) {
          var name = country.getAttribute("name");

          var lat = parseFloat(country.getAttribute("lat"));
          var lng = parseFloat(country.getAttribute("lng"));
          var point = map.getProjection().fromLatLngToPoint(new google.maps.LatLng(lat,lng));

          // width is really an arbitrary unit, relative to CO2 tonnage.
          // equals the side of the drawn square.
          // it is measured in google maps points units.
          var width = parseFloat(country.getAttribute("width"));

          makeCO2Rect(name, point, width);
        }
        xmlLoaded = true;
      }
     });
    }
  }

長方形はポイント単位の幅で定義されるため（全世界は256x256ポイント）、中心を従来のLatLngに割り当てる場合は、ある程度の変換が必要です。

  function rectParamsToBounds(point, width) {
    var ctrX = point.x;
    var ctrY = point.y;

    var swX = ctrX - (width/2);
    var swY = ctrY - (width/2);

    var neX = ctrX + (width/2);
    var neY = ctrY + (width/2);
    return new google.maps.LatLngBounds(
        map.getProjection().fromPointToLatLng(new google.maps.Point(swX, swY)),
        map.getProjection().fromPointToLatLng(new google.maps.Point(neX, neY)));
  }

最後に、 MarkerWithLabelに入る国名で長方形が作成されます（ここではv1.1.5を使用して、http： //google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/にホットリンクできます。 1.1.5 / src / markerwithlabel_packed.jsですが、ローカルコピーを保存することをお勧めします）

長方形をドラッグすることは不可能に見えるので、その中央のマーカーはハンドルとして機能します。ドラッグすると、関連する長方形も一緒に移動します。

  function makeCO2Rect(name, point, width) {
    var rect = new google.maps.Rectangle({
      map: map,
      bounds: rectParamsToBounds(point, width)
    });

    var marker = new MarkerWithLabel({
      map: map,
      position: map.getProjection().fromPointToLatLng(new google.maps.Point(point.x, point.y)),
      draggable: true,
      raiseOnDrag: false,
      labelContent: name,
      labelAnchor: new google.maps.Point(30, 0),
      labelClass: "labels", // the CSS class for the label
      labelStyle: {opacity: 1.0}
    });

    google.maps.event.addListener(marker, 'drag', function(event) {
      var newLatLng = event.latLng;
      var newPoint = map.getProjection().fromLatLngToPoint(newLatLng);
      rect.setBounds(rectParamsToBounds(newPoint, width));
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

ラベルのスタイル設定は、.labels CSSクラスとコンストラクターの両方で行う必要があり、長方形には、線の色、太さ、不透明度、塗りつぶしの色などのオプションがあります。

于 2012-05-21T18:28:16.830 に答える