0

アプリを Rails 3 にアップグレードしようとしています。アプリには編集可能なマップが必要で、Google マップと Mapstraction を使用しています。Rails 3 にアップグレードすると、マップが表示されなくなりました。これは、Google マップ API v2 から v3 に更新する必要があるためだと考えました。

このチュートリアルを使用してアップグレードしようとしましたが、アプリが mapstraction を使用しているため、うまく動作しませんでした。

最初は、これはhtmlにありました：

<script src="http://maps.google.com/maps?file=api&v=2&key=<%= GOOGLE_MAPS_KEY %>" type="text/javascript"></script>
<script src="/javascripts/mapstraction/mxn.js" type="text/javascript"></script>
<script src="/javascripts/mapstraction/mxn.core.js" type="text/javascript"></script>
<script src="/javascripts/mapstraction/mxn.google.core.js" type="text/javascript"></script>

そして、maps.js は次のようになりました。

var Map = function() {
    this.init()
}

$.extend(Map.prototype, {
    m : false,
    init: function() {
        this.m = new mxn.Mapstraction('mapdiv', 'googlev3')
        this.m.addControls({pan: true, zoom: 'large', map_type: false})
        // this.m.enableScrollWheelZoom()
        this.m.setMapType(3)
        return this.m
    },
    addPoint: function(lat, lng, html) {
        var myPoint = new mxn.LatLonPoint(lat, lng);
        var marker = new mxn.Marker(myPoint);
        marker.setInfoBubble(html);
        this.m.addMarker(marker);
    },
    setCenterAndZoom: function(center, zoom) {
        this.m.setCenterAndZoom(center, zoom)
    },
    boundingBox: function(lat1, lon1, lat2, lon2) {
        var zoom = this.m.getZoomLevelForBoundingBox(new mxn.BoundingBox(lat1, lon1, lat2, lon2))
        var centerlng = (lon1 + lon2) / 2
        var centerlat = (lat1 + lat2) / 2
        var myPoint = new mxn.LatLonPoint(centerlat, centerlng);
        this.m.setCenterAndZoom(myPoint, zoom)
    },
    addPointToLine: function(lat, lng, line, html, length) {
        var point = new mxn.LatLonPoint(lat, lng)
        line.points.push(point);
        var i = line.points.length
        var num = 100
        if (i == 1) {
            m.addPoint(lat, lng, html)
        }
    },
    addUser: function(lat, lng, avatar, html) {
        var marker = new mxn.Marker(new mxn.LatLonPoint(lat, lng));
        marker.setInfoBubble(html);
        marker.setIcon(avatar);
        marker.setIconSize([30,30])
        m.m.addMarker(marker);
    }
});

HTMLをこれに変更してみました（アップグレードチュートリアルとmapstractionのチュートリアルに基づいて）：

<script src="//maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="http://mapstraction.com/mxn/build/latest/mxn.js?(googlev3)" type="text/javascript"></script>

しかし、それが違いを生まなかったとき、私はmapstractionを削除し、maps.jsを次のように変更しようとしました:

var Map = function() {
    this.init()
}

$.extend(Map.prototype, {
    m : false,
    init: function() {
        this.m = new google.maps.Map(document.getElementById('mapdiv'), {zoom: 13, mapTypeId: google.maps.MapTypeId.HYBRID});
        // this.m.addControls({pan: true, zoom: 'large', map_type: false})
        // this.m.enableScrollWheelZoom()
        // this.m.setMapType(3)
        return this.m
    },
    addPoint: function(lat, lng, html) {
        var myPoint = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker(myPoint);
        marker.setInfoBubble(html);
        this.m.addMarker(marker);
    },
    setCenterAndZoom: function(center, zoom) {
        this.m.setCenterAndZoom(center, zoom)
    },
    boundingBox: function(lat1, lon1, lat2, lon2) {
        var zoom = this.m.getZoomLevelForBoundingBox(new google.maps.LatLonAltBox(lat1, lon1, lat2, lon2))
        var centerlng = (lon1 + lon2) / 2
        var centerlat = (lat1 + lat2) / 2
        var myPoint = new google.maps.LatLng(centerlat, centerlng);
        this.m.setCenterAndZoom(myPoint, zoom)
    },
    addPointToLine: function(lat, lng, line, html, length) {
        var point = new google.maps.LatLng(lat, lng)
        line.points.push(point);
        var i = line.points.length
        var num = 100
        if (i == 1) {
            m.addPoint(lat, lng, html)
        }
    },
    addUser: function(lat, lng, avatar, html) {
        var marker = new google.maps.Marker(new google.maps.LatLng(lat, lng));
        marker.setInfoBubble(html);
        marker.setIcon(avatar);
        marker.setIconSize([30,30])
        m.m.addMarker(marker);
    }
});

しかし、まだ何も...地図を表示する方法を知っている人はいますか?

ありがとう

4

1 に答える 1

0
  1. あなたのコードは jQuery( $.extend) を使用しているようですが、jQuery を含めましたか?
  2. 定義したすべてのメソッドはのメソッドですが、Map これらのメソッドを呼び出そうとしますMap.m(これはgoogle.map.Mapインスタンスであり、そのようなメソッドはありません)。
  3. -instanceを作成する場所がわかりませんMap（ ではなく、「クラス」を意味しますgoogle.maps.Map）
  4. a には、存在しない -property がgoogle.maps.Map必要centerです (少なくとも でgoogle.maps.Map-instanceを作成するときは必要ありませんMap.init()) 。
于 2015-06-09T12:28:49.977 に答える