myPoint

myPoint

关注
发信
关注(28)粉丝(399)

在Rails 3中用mapstraction升级google maps api

本文介绍了在Rails 3中用mapstraction升级google maps api的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



我一直在尝试使用此来升级它，但因为该应用程序正在使用映射，所以我一直难以使用它。



最初，这是在html：

 < script src =http://maps.google.com/maps?file=api&v=2&key =<％= GOOGLE_MAPS_KEY％>类型= 文本/ JavaScript的 >< /脚本> 
< script src =/ javascripts / mapstraction / mxn.jstype =text / javascript>< / script> 
< script src =/ javascripts / mapstraction / mxn.core.jstype =text / javascript>< / script> 
< script src =/ javascripts / mapstraction / mxn.google.core.jstype =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=falsetype =文本/ JavaScript的>< /脚本> 
< script src =http://mapstraction.com/mxn/build/latest/mxn.js?(googlev3）type =text / javascript>< / script>

但是当这没有什么不同时，我尝试删除mapstraction并将maps.js更改为如下所示：

pre code $ 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）
返回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（c输入，缩放）
}，
boundingBox：函数（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）;
}
}）;

但是还是一无所有......有没有人知道我如何让地图显示？ / p>

感谢

解决方案

  1. 您的代码使用jQuery（ $。extend> ），您是否包含jQuery？

  2. 您定义的所有方法都是 Map ，但您尝试为 Map.m （这是 google.map .Map -instance并没有这样的方法）

  3. 我没有看到你在哪里创建 Map -instance（我的意思是你的类，而不是 google.maps.Map ）

  4. a google.maps.Map 需要中心 - 属性不存在（至少在创建 google.maps.Map -instance in Map.init（））


I'm trying to upgrade an app into Rails 3. The app requires a map that can be edited and it has been using google maps and mapstraction. When I upgraded to rails 3 the map stopped showing up and I figured that's because it needed to be updated from google maps api v2 to v3.

I've been trying to use this tutorial to upgrade it but because the app is using mapstraction I've been having difficulty getting it to work.

Initially, this was in the 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>

And the maps.js was as follows:

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);
    }
});

I tried changing the html to this (based on the upgrade tutorial and the tutorial from 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>

But when that didn't make a difference I tried to remove mapstraction and change the maps.js to the following:

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);
    }
});

But still nothing...does anyone have any idea how I can get the map to display?

Thanks

解决方案
  1. as it seems your code uses jQuery($.extend), did you include jQuery?
  2. all the method you've defined are methods of Map but you try to call these methods for Map.m(which is a google.map.Map-instance and doesn't have such methods)
  3. I don't see where you create the Map-instance(I mean your "class", not the google.maps.Map) at all
  4. a google.maps.Map requires a center-property which is not present(at least not when you create the google.maps.Map-instance in Map.init())

这篇关于在Rails 3中用mapstraction升级google maps api的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-20 12:55
Powered by LMLPHP ©2024 myPoint 0.042261