0

ユーザーが GoogleMap にポリゴンを描画し、それをデータベースに保存できるようにするアプリケーションを作成したいと考えています。

後で必要なときに、彼はデータベースからマップ上にポリゴンを描画できるはずです。

これを行うための最良のアプローチは何ですか?

私の提案は、ポリゴン データを js 配列に保存し、JSON を使用して mvc に送信することです。それは良いアプローチですか？

GoogleMapでポリゴンを描く方法は?

JSを使用してクライアントからMVCでコントローラーを呼び出す方法は?

これには特別なコントローラーが必要ですか (JSON データの受信)

このためのサンプルコードはありますか?

4

1 に答える 1

2

これは、ユーザーがポリゴンを描画できるようにする方法の非常に大雑把な例です。

  // declare map outside of initialize function so that drawPoints() can use it
  var map;

  // called when page is loaded
  function initialize() {

    // arbitrary point
    var myLatLng = new google.maps.LatLng(24.88484848484, -70.268858484);

    // options to init map with, again arbitrary
    var myOptions = {
      zoom: 5,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // get our map object
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // array to store markers that user has drawn
    var markers = [];

    // add event listener to the map to get the click events and draw a marker
    google.maps.event.addListener(map, 'click', function(e) {

      var marker = new google.maps.Marker();

      marker.setPosition(e.latLng);
      marker.setMap(map);
      marker.setVisible(true);

      // push it to the markers array
      markers.push(marker);

      // add an event listener to each marker so that we can draw a polygon
      // once user clicks on on of the markers in the markers array, assuming
      // that they are ready to join up the polygon and have it drawn
      google.maps.event.addListener(marker, 'click', function(e) {
        drawPoints(markers);

        // empty the markers array so that the user can draw a new one, without
        // them all joining up. this is perphaps where you would want to push
        // the markers array to a database, storing the points as latitude/longitude
        // values so that they can be retrieved, put into an array, and drawn
        // as a polygon again. 
        markers = [];
      });

    });

  }

  function drawPoints(markers) {
    var poly = new google.maps.Polygon;

    var points = [];

    for (var i = 0; i < markers.length; i++) {
      points.push(markers[i].getPosition());
    }
    poly.setMap(map);
    poly.setPath(points);
    poly.setVisible(true);
  }​

ここで試してみてください

また、これは非常に便利です。

編集：おそらくポリゴンの描画方法を説明する必要があります...

地図をクリックすると、マーカーが作成されます。いくつでも作成できます。既に配置されているマーカーの 1 つをクリックすると、マーカーのポイント間に多角形が描画されます。ポリゴンが描画されると、それらのマーカーは、ポリゴンが描画される次のセットにはカウントされなくなります。

于 2012-06-14T06:07:54.480 に答える