-1

看看这个问题，看看代码设置一切正常。

我正在一个使用完全相同的自适应地图解决方案的房地产网站上工作，但我在网站中有许多页面需要地图（属性详细信息页面），因此我需要一种方法将纬度/经度坐标嵌入到每个属性详细信息中页面并让外部initialize()脚本将其拾取，但我无法使其正常工作。

我在脚本中添加了 2 lat/ longvar ：initialize()

function initialize(lat, long) {
    var myLatlng = new google.maps.LatLng(lat, long);

然后在需要地图的页面上我尝试了这个：

<script>
    window.onload = function() {
        if (typeof(map) != 'undefined') {
             initialize(-33.867487,151.20699);
        }
    }
</script>

但是没有获取坐标： 在此处输入图像描述

我确信这与所有内容的加载方式有关，即脚本initialize()是通过 jQuery 进行 AJAX 处理的，load()然后一旦加载，地图 API 就会通过 jQuery 加载$.getScript，这一切都发生在$(window).load. 我只是想知道纬度/经度坐标如何与此设置相关联？

- 编辑 -

我将尽可能简单地分解代码设置：

在我的外部全局 JS 文件中，我设置了使用Inquire JS库的自适应 Google Map 解决方案：

$(window).load(function() {

    var mapContainer = $('.map'),
    mapStaticContainer = $('.map__static'),
    mapDynamicContainer = $('<div class="map__dynamic"/>');

    /* --Enquire library-- */
    enquire.register(BPlap, {

        deferSetup: true,

        setup: function() {
            mapContainer.prepend(mapDynamicContainer);
            mapDynamicContainer.html('<span class="preloader"><span class="preloader__spinner"></span> <em>Loading map&#8230;</em></span>').load('/includes/modules/adaptive-google-map/js.php', function() {
                $.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=initialize', function(){});
            });
        },

        // Not palm size viewport
        match: function() {
            mapStaticContainer.hide();
            mapDynamicContainer.show();
            // Need this so the map fully renders when going from `match` -> `unmatch` -> `match`
            if (typeof(map) != 'undefined') {
                var center = map.getCenter();
                google.maps.event.trigger(map, 'resize');
                map.setCenter(center);
            }
        },

        // Palm size viewport
        unmatch: function() {   
            mapStaticContainer.show();
            mapDynamicContainer.hide();
        }

    }, true).listen();

});

通过 jQuery 输入 AJAX 文件的内容load()：/includes/modules/adaptive-google-map/js.php：

<div id="map_canvas"></div>
<script>
//function initialize() {
function initialize(lat, long) {
    var myLatlng = new google.maps.LatLng(lat, long);
    //var myLatlng = new google.maps.LatLng(-33.867487, 151.20699);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        animation: google.maps.Animation.DROP
    });
    // Center Google Maps on browser resize (https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive)
    var center;
    function calculateCenter() {
        center = map.getCenter();
    }
    google.maps.event.addDomListener(map, 'idle', function() {
        calculateCenter();
    });
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(center);
    });
}
</script>

如果我在上面的脚本中硬编码纬度/经度坐标initialize()（注释掉的行）一切正常，那么当我试图从页面内传递lat/ longvar 时，我无法插入地图。

4

1 回答 1

0

我想通了，我需要从这里删除变量：

function initialize(lat, long) {

所以就是这样：

function initialize() {
    var myLatlng = new google.maps.LatLng(lat, long);

然后在使用地图的页面上放置这个内联 JS：

<script>
var lat     = 53.43072,
    long    = -3.049134;
</script>
于 2013-03-20T03:41:07.070 回答