1

Google API 内のマップ タイル プロバイダーとして OpenStreetMap (または OpenCycleMap) を使用するとよいと思いました。これがプレーンな JavaScript でどのように行われるかの例を次に示します。

<script type="text/javascript">
        var element = document.getElementById("map");

        /*
        Build list of map types.
        You can also use var mapTypeIds = ["roadmap", "satellite", "hybrid", "terrain", "OSM"]
        but static lists sucks when google updates the default list of map types.
        */
        var mapTypeIds = [];
        for(var type in google.maps.MapTypeId) {
            mapTypeIds.push(google.maps.MapTypeId[type]);
        }
        mapTypeIds.push("OSM");

        var map = new google.maps.Map(element, {
            center: new google.maps.LatLng(48.1391265, 11.580186300000037),
            zoom: 11,
            mapTypeId: "OSM",
            mapTypeControlOptions: {
                mapTypeIds: mapTypeIds
            }
        });

        map.mapTypes.set("OSM", new google.maps.ImageMapType({
            getTileUrl: function(coord, zoom) {
                return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
            },
            tileSize: new google.maps.Size(256, 256),
            name: "OpenStreetMap",
            maxZoom: 18
        }));
    </script>

http://wiki.openstreetmap.org/wiki/Google_Maps_Example

このようにして、OSM マップ (たとえばハイキングやサイクリングの目的で見栄えがよくなる) を、Google マップの種類とより優れた Google インターフェース、および Google マップでのみ使用できるすべてのメソッドとオプションと組み合わせることができます。 gmaps4rails (例: クラスタリングなど)。

私はこれを実装する方法を理解しようとしましたが、率直に言って少し頭を悩ませています。

他の誰かが同様のことを達成しようとしましたか?

編集：私が望むものを達成する方法を見つけました。きれいではありませんが、とにかく投稿する必要があると思ったので、他の人がより良いアイデアを思いつくかもしれません.

私はこのgmaps4rails.base.js.coffeeメソッドを追加しました：

create_OSM : ->
OSMMapTypeOptions = new google.maps.ImageMapType(
  getTileUrl: (coord, zoom) ->
    "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png"
  tileSize: new google.maps.Size(256, 256)
  name: "OSM"
  maxZoom: 18
)
@serviceObject.mapTypes.set("OSM", OSMMapTypeOptions)
CycleMapTypeOptions = new google.maps.ImageMapType(
  getTileUrl: (coord, zoom) ->
    "http://tile.opencyclemap.org/cycle/" + zoom + "/" + coord.x + "/" + coord.y + ".png"
  tileSize: new google.maps.Size(256, 256)
  name: "Cycle"
  maxZoom: 18
)
@serviceObject.mapTypes.set("OCM", CycleMapTypeOptions)
@serviceObject.setMapTypeId("OSM")

の直後にこのjs_builder.rbようなメソッド呼び出しを追加しました。@js << "#{gmap_id}.create_OSM();"@js << "#{gmap_id}.initialize();"

最後に、ビュー コードは次のようになります。

 <%= gmaps("markers" => {"data" => @json},
                "map_options" => {"type" => "TERRAIN", :raw => '{mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, "OSM", "OCM"], style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}}'}) %>

それは機能し、結果に満足しています。ただし、深刻なクリーンアップとリファクタリングが必要です。コメントはありますか？

4

0 に答える 0