🧒🏿 🎵 🦎 Google Maps Javascript APIの最初の紹介 👙 🕊️ ⭕️

この投稿では、Google Maps JS APIを使用した経験と、非常にトラフィックの多いサイトのモバイルバージョンでの実装について説明します。

ごく最近、職場で、私は訪問者の現在の座標内でサイトのユーザーを検索するように設計されたモジュールの実装に対処する必要がありました（サイトの件名は日付であり、秘密を明かしたり宣伝したりしないためにリンクと名前を提供しません）。最初に、既存のモジュール実装に出会いました。このバージョンは1、2年前に書かれ、古いバージョンのAPIを使用していたため、ドキュメントにアクセスしてこのモジュールに何かを追加しようとすると、当然エラーが発生しました。

無料のAPIキーを登録したら、使用するライブラリを更新し、ヘルプの調査を開始しました。

独自のマップ要素（オーバーレイ）を作成する機会に非常に満足しましたが、実際にはそれを行う必要がありました。この機能の使用例を示します。

function TestOverlay(bounds) { this._bounds = bounds; } TestOverlay.prototype = new GOverlay(); TestOverlay.prototype.initialize = function(map) { var div = document.createElement("div"); div.style.border = "2px solid #888888"; div.style.position = "absolute"; map.getPane(G_MAP_MAP_PANE).appendChild(div); this._map = map; this._div = div; } TestOverlay.prototype.remove = function() { this._div.parentNode.removeChild(this._div); } TestOverlay.prototype.copy = function() { return new Rectangle(this._bounds); } TestOverlay.prototype.redraw = function(force) { if (!force) return; var c1 = this._map.fromLatLngToDivPixel(this._bounds.getSouthWest()); var c2 = this._map.fromLatLngToDivPixel(this._bounds.getNorthEast()); this._div.style.width = Math.abs(c2.x - c1.x) + "px"; this._div.style.height = Math.abs(c2.y - c1.y) + "px"; this._div.style.left = (Math.min(c2.x, c1.x) - 2) + "px"; this._div.style.top = (Math.min(c2.y, c1.y) - 2) + "px"; } function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.addControl(new GSmallMapControl()); var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngDelta = (northEast.lng() - southWest.lng()) / 3; var latDelta = (northEast.lat() - southWest.lat()) / 4; var rectBounds = new GLatLngBounds( new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta), new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta)); map.addOverlay(new TestOverlay(rectBounds)); } }

この例からわかるように、GOverlayインターフェイスを実装することにより、独自のマップ要素が作成されます。このインターフェイスを実装するには、4つのメソッド（初期化、削除、コピー、再描画）を実装する必要があります。

さらに、GPoint、GSize、GIconなどの非常に便利で直感的なクラスを使用して、標準のマップ要素を操作します。たとえば、後者では、アイコンのサイズを設定したり、アイコンに影を追加したり、マップとアイコンの接点を設定したりできます。これはすべて、非常にシンプルなインターフェイスのおかげで可能です。

  var baseIcon = new GIcon(G_DEFAULT_ICON); baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; baseIcon.iconSize = new GSize(20, 34); baseIcon.shadowSize = new GSize(37, 34); baseIcon.iconAnchor = new GPoint(9, 34);

Google Maps APIの最新の機能を使用することにより、更新の結果得られるモジュールは、はるかに便利で興味深いものになりました。

Google Maps Javascript APIの最初の紹介

More articles: