0
我想要一個應用程序升級到Rails 3應用程序需要一張地圖，可以編輯和已使用谷歌地圖和mapstraction了。當我升級到Rails 3的地圖就不來了，我想通這是因爲它需要從谷歌地圖API V2至V3更新。升級谷歌地圖API與mapstraction對Rails 3
我一直在嘗試使用此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>
但是，當這沒有什麼差別我試圖刪除mapstract離子和改變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);
}
});
，但仍然沒有......沒有任何人有任何想法，我怎樣才能在地圖上顯示？
感謝