8

私はjavascriptとGoogleマップAPIが初めてなので、「yzocFzynhVq}@n}@o}@nzD」のようなポイントをエンコードし、それを使用してポリラインを描画しようとしましたが、問題を解決するためのトピックやドキュメントが見つかりませんでした. それをデコードする方法についてのトピックはほとんどありませんが、私はそのことをする必要はありません。エンコードされたポイントを使用してポリラインを描画するだけです。誰かが私に例を挙げてもらえますか?

4

1 に答える 1

11

decodePathについては、ジオメトリ ライブラリのドキュメントを参照してください。

これにより、エンコードされた文字列が、 Polylineの作成に使用できる google.maps.LatLng オブジェクトの配列に変換されます。

実施例

作業コードスニペット:

function initialize() {
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
  var mapOptions = {
    zoom: 13,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);


  // Construct the polygon
  bermudaTriangle = new google.maps.Polygon({
    paths: google.maps.geometry.encoding.decodePath("yzocFzynhVq}@n}@o}@nzD"),
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);
  map.setCenter(bermudaTriangle.getPath().getAt(Math.round(bermudaTriangle.getPath().getLength() / 2)));
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map_canvas {
  height: 100%;
}
@media print {
  html,
  body {
    height: auto;
  }
  #map_canvas {
    height: 650px;
  }
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

于 2012-10-29T13:03:22.207 に答える