Question

在我的网站上找到了通过Google使用InfoBox插件实现异步Google Map的方法。这是我的代码：

<script type="text/javascript">
    jQuery(document).ready(function() {
        loadScript();
    });

    function initialize() {
        mapCenter = new google.maps.LatLng(-34.770215, 149.706806);
        var mapProp = {
            center: mapCenter,
            zoom:18,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            draggable: false
        };
        var map = new google.maps.Map(document.getElementById("map"),mapProp);
        var marker=new google.maps.Marker({
          position:mapCenter,
        });
        marker.setMap(map);
        google.maps.event.addListener(map, 'click', function(event){
            this.setOptions({scrollwheel:true});
             this.setOptions({draggable:true});
        });
        google.maps.event.addListener(map, 'mouseout', function(event){
            this.setOptions({scrollwheel:false});  
            this.setOptions({draggable:false});  
        });
    }


    function loadScript() {
        var script = document.createElement("script");
        script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
        document.body.appendChild(script);
        script.onload = function() {
            var scriptInfoBox = document.createElement("script");
            scriptInfoBox.type = "text/javascript";
            scriptInfoBox.src = "{{ 'assets/javascript/googlemap-infobox.js?callback=initialize2'|theme }}";
            document.body.appendChild(scriptInfoBox);
            scriptInfoBox.onload = function() {
                infobox = new InfoBox({
                     content: document.getElementById("infobox"),
                     disableAutoPan: false,
                     maxWidth: 150,
                     pixelOffset: new google.maps.Size(-140, 0),
                     zIndex: null,
                     boxStyle: {
                        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                        opacity: 0.75,
                        width: "280px"
                    },
                    closeBoxMargin: "12px 4px 2px 2px",
                    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                    infoBoxClearance: new google.maps.Size(1, 1)
                });
                 google.maps.event.addListener(marker, 'click', function() {
                    infobox.open(map, this);
                    map.panTo(loc);
                });
            }
        };
    }
</script>

这是地图的我的div

<div id="map"></div>

这是InfoBox的My Div

<div class="infobox-wrapper">
    <div id="infobox">
        The contents of your info box. It's very easy to create and customize.
    </div>
</div>

错误说：未捕获的ReferenceError：未定义标记救命啊！

Answer 1

您正在initialize函数中将标记创建为局部变量。它不适用于您的loadScript功能。使它成为一个全局变量，该错误将停止。

更新：事实上，您可能会遇到与map变量完全相同的问题。所以我已将其添加到下面的代码中。

var marker, map;

function initialize() {
    ...
    map = new google.maps.Map(...);
    marker=new google.maps.Marker({
        position:mapCenter,
    });
}

Answer 2

试试这段代码：

<script type="text/javascript">
jQuery(document).ready(function() {
    var marker ;
    loadScript();
});

function initialize() {
    mapCenter = new google.maps.LatLng(-34.770215, 149.706806);
    var mapProp = {
        center: mapCenter,
        zoom:18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        draggable: false
    };
    var map = new google.maps.Map(document.getElementById("map"),mapProp);
    marker =new google.maps.Marker({
      position:mapCenter,
    });
    marker.setMap(map);
    google.maps.event.addListener(map, 'click', function(event){
        this.setOptions({scrollwheel:true});
         this.setOptions({draggable:true});
    });
    google.maps.event.addListener(map, 'mouseout', function(event){
        this.setOptions({scrollwheel:false});  
        this.setOptions({draggable:false});  
    });
}


function loadScript() {
    var script = document.createElement("script");
    script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
    document.body.appendChild(script);
    script.onload = function() {
        var scriptInfoBox = document.createElement("script");
        scriptInfoBox.type = "text/javascript";
        scriptInfoBox.src = "{{ 'assets/javascript/googlemap-infobox.js?callback=initialize2'|theme }}";
        document.body.appendChild(scriptInfoBox);
        scriptInfoBox.onload = function() {
            infobox = new InfoBox({
                 content: document.getElementById("infobox"),
                 disableAutoPan: false,
                 maxWidth: 150,
                 pixelOffset: new google.maps.Size(-140, 0),
                 zIndex: null,
                 boxStyle: {
                    background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                    opacity: 0.75,
                    width: "280px"
                },
                closeBoxMargin: "12px 4px 2px 2px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(1, 1)
            });
             google.maps.event.addListener(marker, 'click', function() {
                infobox.open(map, this);
                map.panTo(loc);
            });
        }
    };
}

Google Map InfoBox异步集成无法正常工作

2 个答案: