在Rails3中使用mapstraction升级google地图api

Question

我正在尝试将一个应用程序升级到Rails3。这个应用程序需要一个可以编辑的地图，而且它一直在使用谷歌地图和mapstraction。当我升级到Rails3时，地图不再显示，我想这是因为它需要从谷歌地图api v2更新到v3。

我一直在尝试使用这个tutorial来升级它，但是因为这个应用程序正在使用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>

但是，当这不起作用时，我尝试删除映射操作，并将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);
    }
});

但是nothing...does，有谁知道我怎么才能让地图显示出来？

谢谢

Answer 1

1. 您的代码似乎使用了jQuery($.extend)，您是否包含了jQuery？
2. 您定义的所有方法都是Map的方法，但您尝试为Map.m调用这些方法(它是一个google.map.Map类，没有这样的方法)<-instance>H19>我不知道您在哪里创建<代码>D10实例(我是指您的“类”，不是google.maps.Map)任何
3. a google.maps.Map都需要一个不存在的center-property (至少在Map.init())

中创建google.maps.Map-instance时不存在