Question

我正在为客户端编写Wordpress页面，该页面根据从数据库加载的数据显示一些文本和Google Map。

到目前为止，我已经完成了大部分工作。然而，谷歌地图开始加载神秘的“蓝调”，只显示看起来像海洋的东西，所有其他选项（放大/缩小，街景等）都是灰色的。

FireBug等没有可用的JavaScript错误。
包含地图的div（#container和#map-canvas）设置为实际像素值。
给出here的解决方案不会产生积极的结果。

这是最终结果：

What it looks like

任何想法都会非常受欢迎。

修改每个请求的代码片段：

echo '<script>function initialize(e,t,n){e=parseFloat(e);t=parseFloat(t);var r=new google.maps.LatLng(e,t);var i;var s;var o={center:r,zoom:14,mapTypeId:google.maps.MapTypeId.ROADMAP};s=new google.maps.Map(document.getElementById("map-canvas"),o);i=new google.maps.Marker({map:s,draggable:false,animation:google.maps.Animation.DROP,position:r,title:n});google.maps.event.addDomListener(window,"load",initialize)}jQuery(function($){initialize("'.$detail['latitude'].'","'.$detail['longitude'].'","'.$detail['name'].'")})</script>';
        echo '
            <div id="container" style="height:500px;width:500px;">
                <div id="information">
                    <h2>'.$detail['name'].'</h2>
                    <p>'.$detail['description'].'</p>
                    <p>'.$detail['address'].'</p>
                </div>
                <div id="map-canvas" style="width:300px;height:200px;">
                </div>
            </div>
        ';

JS的未缩小版本：

function initialize(lat,lng,name) {
lat = parseFloat(lat);
lng = parseFloat(lng);
var ourLocation = new google.maps.LatLng(lat,lng);
var marker;
var map;
    var mapOptions = {
        center: ourLocation,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    marker = new google.maps.Marker({
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: ourLocation,
        title:name
    });
    google.maps.event.addDomListener(window,"load",initialize);
};

jQuery(function($){
    initialize(lat,lng,name);
    // the variables lat, lng, and name are replaced with php variables in the code
});

Answer 1

我明白了。花了一会儿，但是......

Wordpress因某种原因讨厌jQuery调用。

我注意到在JS控制台中，如果我使用变量来调用初始化函数，那么地图就会神奇地工作。

我没有使用jQuery，而是使用了windows onload事件。

window.onload = function() { initialize('.$detail['latitude'].','.$detail['longitude'].',"'.$detail['name'].'"); }

神奇地工作。经验教训，jQuery和Wordpress就像草莓巧克力牛奶和印度苍白啤酒：它们不能很好地混合。

谢谢大家的贡献。

谷歌地图 - 所有按钮在加载时都被禁用

1 个答案: