将require.js与Google Maps JavaScript API v3一起使用

Question

使用require.js和Google Maps JavaScript API v3时遇到了一些奇怪的问题。你可以在

看到奇怪的东西

http://ec2-122-248-213-247.ap-southeast-1.compute.amazonaws.com/laugh-rev-6/index.html#contact

当你拖动它的地图部分时，标记不在中间，第二个标记不在第二位。

我尝试将src网址更改为

http://maps.googleapis.com/maps/api/js?key=＆安培;传感器=假

但是有一个空白的屏幕。

以下是代码：

JS /视图/ contact.js

define([
    'jquery',
    'underscore',
    'backbone',
    'googlemap',
    'text!templates/contact.html'
], function($, _, Backbone, google,
            contactTemplate){

    var contactView = Backbone.View.extend({
        el: "#container",

        render: function(){
            this.$el.html(contactTemplate);

            var mapCanvas = $( "#map_canvas" ).get( 0 );

            try{
                google.addMapToCanvas( mapCanvas );
            }catch(err){
                console.log(err);
            }

        }
    });
    return contactView;
});

JS /库/谷歌/ map.js

define(
    [ "async!http://maps.google.com/maps/api/js?sensor=false!callback" ],
    function() {
        return {
            addMapToCanvas: function( mapCanvas ) {

                var myLatlng = new google.maps.LatLng(1.309631, 103.865664);

                var myOptions = {
                    center: myLatlng,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map( mapCanvas, myOptions );

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    title:'20 KALLANG AVENUE\n2C LOBBY B\nPICO CREATIVE CENTRE\nSINGAPORE 339411.\nTel: +65 6866 0798'
                });
                google.maps.event.addListener(marker, 'click', function(){

                    if (marker.getAnimation() != null) {
                        marker.setAnimation(null);
                    } else {
                        marker.setAnimation(google.maps.Animation.BOUNCE);
                    }

                });
            }
        }
    }

JS /模板/ contact.html

<div class="hero-unit3" style="float: left">
    <div style="margin-top:-30px;margin-bottom:30px"><img src="./assets/img/contact.png"/></div>

    <div style="margin-top:10px">
        <div style="float: left">
            <div id="map_canvas_top_rule" class="rule2"></div>
            <div id="map_canvas"></div>
            <div id="map_canvas_bottom_rule" class="rule2"></div>
        </div>
    </div>

</div>