0

我正在尝试将一个应用程序升级到 Rails 3。该应用程序需要一个可以编辑的地图，并且它一直在使用谷歌地图和 maptraction。当我升级到 rails 3 时，地图停止显示，我认为这是因为它需要从 google maps api v2 更新到 v3。

我一直在尝试使用本教程对其进行升级，但由于该应用程序使用的是地图牵引，我一直难以让它工作。

最初，这是在 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-instance 并且没有此类方法）
  3. 我根本看不到您在哪里创建Map-instance（我的意思是您的“类”，而不是google.maps.Map）
  4. agoogle.maps.Map需要一个center不存在的 -property（至少在您创建google.maps.Map-instance时不存在Map.init()）
于 2015-06-09T12:28:49.977 回答