1

我正在为一个客户端编写一个 Wordpress 页面，该页面显示一些文本和一个基于从数据库加载的数据的谷歌地图。

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

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

这是最终结果的样子：

它看起来像什么

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

编辑： 每个请求的代码片段：

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

1 回答 1

0

我想到了。花了一点时间，但是...

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

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

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

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

这神奇地起作用。吸取的教训，jQuery 和 Wordpress 就像草莓巧克力牛奶和印度淡啤酒：它们不能很好地混合。

感谢所有做出贡献的人。

于 2013-06-12T23:25:27.220 回答