文章/答案/技术大牛

发布

社区首页 >问答首页 >在彩色盒中放置谷歌地图

问在彩色盒中放置谷歌地图
EN

Code Review用户

提问于 2011-03-10 04:22:50

回答 2查看 7.5K关注 0票数 6

我需要放置一个谷歌地图在彩色盒覆盖，我想知道是否有更好的方法来做到这一点。我刚开始学习谷歌的教程，所以没有什么好想象的。

现在，我正在隐藏Google加载地图的div：

<div style="width:0; height: 0; overflow: hidden;">
    <div id="map_canvas" style="width:600px; height:400px; "></div>
</div>

以下是对Colorbox的调用：

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


$(document).ready(function(){

    $("#farm_on_google_maps").colorbox({
        inline: true,
        width:700,
        height:450,
        href : '#map_canvas'
        });
});

即使它能工作，我想知道地图是否可以直接加载到彩色盒中。

google-apps-script

google-maps

回答 2

Code Review用户

回答已采纳

发布于 2011-03-14 23:37:32

如果您想动态插入Google，而不是简单地链接到href，您可以这样做：

在HTML中，准备好颜色框的基本轮廓：

<div id="box">
    <div class="google-map"></div>
</div>

然后，当您调用您的彩色盒时，使用html选项调用它：

$("#farm_on_google_maps").colorbox({
            inline: true,
            width:700,
            height:450,
            html : $("#box").html()
            });

这将设置您的颜色盒与基本的HTML结构。然后，我们希望将google地图动态地插入到彩色框中，如下所示：

var googleMap = $("#cboxLoadedContent").find("div.google-map")[0];
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(googleMap, myOptions);

cboxLoadedContent div是在它被调用时由颜色框创建的，所以它只是一个抓住它并使用它来设置Google的问题。

票数 4

Code Review用户

发布于 2012-12-18 00:57:13

没有比这更容易的了：

<a href="URLTOMAP" class="colorbox">Map</a>

$(document).ready(function(){
$(".colorbox").colorbox({ rel:'colorbox' });
});

就像罐头上写的那样。

票数 1

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/1223

复制

相似问题

问在彩色盒中放置谷歌地图
EN

回答 2

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在彩色盒中放置谷歌地图EN

回答 2

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在彩色盒中放置谷歌地图
EN