响应式 居中_创建自动居中的响应式Google地图

响应式 居中

In principle, it’s easy to make an embedded Google Map responsive: just remove the height and width attributes that Google supplies in the embed code and substitute appropriate CSS and wrapping markup.

原则上，使嵌入式Google Map响应很容易：只需删除Google在嵌入代码中提供的height和width属性，并替换适当CSS和包装标记即可。

However, there’s one significant problem: any horizontal window resize cuts off the edge of the map, meaning that it must be moved or rescaled to track back to the original coordinates. However, if you change the approach a little, it’s entirely possible to solve the problem with a little JavaScript.

但是，存在一个重大问题：任何水平窗口调整大小都会切断地图的边缘，这意味着必须移动或调整其比例以追溯到原始坐标。 但是，如果稍微改变一下方法，完全可以用一些JavaScript解决问题。

First, rather than using an <iframe> as suggested by the Google Maps embed options, we must construct our own container for the map:

首先，我们必须为地图构建自己的容器，而不是使用Google Maps嵌入选项建议的<iframe> ：

<div id="map_container">
    <div id="map"></div>
</div>

We need to size and position these elements to take the map we are going to project into it. To do so, we’ll use a fairly standard CSS pattern:

我们需要确定这些元素的大小和位置，以获取将要投影到其中的地图。 为此，我们将使用相当标准的CSS模式：

#map_container {
	position: relative;
	padding-top: 50%;
}
#map {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}

To make the map taller, increase the value of padding-top. The map_container can be styled in any way you wish (provided with a border, given a percentage width, etc).

要使地图更高，请增加padding-top的值。 map_container可以按照您希望的任何方式设置样式(带有边框，给定百分比宽度等)。

To load the map into the <div> elements we have made, we use the Google Maps API. At the bottom of the page, add:

要将地图加载到我们制作的<div>元素中 ，我们使用Google Maps API 。 在页面底部，添加：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>

Below this, add a script:

在此下面，添加一个脚本：

function initialize() {
    var myLatlng = new google.maps.LatLng(53.3333,-3.08333),
    mapOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
var map = new google.maps.Map(document.getElementById('map'), mapOptions),
contentString = 'Some address here..',
infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 500
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
});

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

The result should be what you see at the top of this article. A few important points:

结果应该是您在本文顶部看到的。 一些要点：

1. The values associated with google.maps.LatLng are the latitude and longtitude of your target. They will be similar to (but may not be exactly the same as) the values you see in the URL for the same location on the Google Maps website. For example:

   与google.maps.LatLng关联的值是目标的latitude和longtitude 。 它们将与您在Google Maps网站上相同位置的网址中看到的值相似(但可能不完全相同)。 例如：

   https://www.google.com/maps/place/Times+Square/@40.758895,-73.9873197,17z

   The first number in this URL is the latitude of the location; the second, longitude. You’ll see similar numbers used when you try to embed the location as a Google Map:

   该URL中的第一个数字是位置的纬度； 第二，经度。 当您尝试将该位置嵌入Google地图时，会看到类似的数字：

   <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1
   d3022.1422937950165!2d-73.98731968484512!3d40.75889497932676 width="600" 
   height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

   In the embed code, the longitude comes first, immediately after the 2d in the URL, followed by the latitude.

   在嵌入代码中，经度是第一位，紧随URL中的2d之后，其次是纬度。

2. zoom is the level of zoom for the default appearance of the map. You’ll also see that in both URLs, denoted by z.

   zoom是地图默认外观的缩放级别。 您还将在两个URL中用z表示。

3. contentString is the label for the target, which will appear when it is clicked.

   contentString是目标的标签，单击该目标时将显示该标签。

There’s a great deal more that can be achieved with the Google Maps API, but I’ll leave that for future articles.

Google Maps API可以实现更多功能，但我将在以后的文章中介绍。

翻译自: https://thenewcode.com/359/Create-An-Auto-Centered-Responsive-Google-Map

响应式 居中