Question

我正在尝试将地图插入第2列，整个网站都应该响应。我知道我的代码编写得很糟糕，这是我第一次有这样的事情，经过一天寻找解决方案后，我现在非常绝望。

HTML

<div class="section group">
<div class="col span_1_of_2">
</div>
<div class="col span_1_of_2">
    <div id="map-canvas"></div>
</div>
</div>

CSS

.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
#map-canvas {
    height: 100%;
    width: 100%;
    }

@media only screen and (max-width: 480px) {
.col { 
    margin: 1% 0 1% 0%;
}
}

@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2, #map-canvas { width: 100%; }
}

链接中的Javascript代码

http://codepen.io/anon/pen/doZBGb 如果codepen的链接不起作用： https://gist.github.com/anonymous/161951ccd66d110aed83

欢迎任何帮助。

Answer 1

嗯...

<强> JSfiddle Demo

var map;
var coordinates;

function placeMarker(location) {
    //marker will only exist inside this function
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true
    });
}

function initialize() {

    var centerPosition = new google.maps.LatLng(46.910246, 18.048979);
    var options = {
        zoom: 6,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);

    google.maps.event.addListener(map, 'click', function (evt) {
        placeMarker(evt.latLng);
        coordinates = Array(evt.latLng + ';');
    });

}

$(document).ready(function() {
    initialize();

    $('input[name="get-coordinates"]').click(function() {
        console.log(coordinates);
    });
});

，你要做的就是：

#map { // use this selector to make responsive
    width: 450px; // change this to %
    height: 400px; // and or call between @media 
}

......就是这样！

在2列响应式布局中使用Google地图

1 个答案: