Javascript 谷歌地图删除控件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11334042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 05:28:38  来源:igfitidea点击:

Google maps removing controls

javascripthtmlcssgoogle-maps

提问by Eric Goncalves

I am attempting to create a Google map of my company location. I used the link button on the Google maps page. Everything's fine, but when I shrink the map to 200 x 200 all the maps controls take over the map and blocks the view from the map. Is there a way to get ride of them? All I want is the pin and the zoom in and out button. Thank you.

我正在尝试创建我公司位置的 Google 地图。我使用了谷歌地图页面上的链接按钮。一切都很好,但是当我将地图缩小到 200 x 200 时,所有地图控件都会接管地图并阻止地图上的视图。有没有办法搭上他们?我想要的只是大头针和放大和缩小按钮。谢谢你。

<iframe width="200" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"    src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=244+5th+Avenue,+New+York,+NY&amp;aq=t&amp;sll=37.0625,-95.677068&amp;sspn=48.956293,107.138672&amp;ie=UTF8&amp;hq=&amp;hnear=244+5th+Ave,+New+York,+10016&amp;ll=40.744556,-73.987378&amp;spn=0.005763,0.013078&amp;t=m&amp;z=14&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=244+5th+Avenue,+New+York,+NY&amp;aq=t&amp;sll=37.0625,-95.677068&amp;sspn=48.956293,107.138672&amp;ie=UTF8&amp;hq=&amp;hnear=244+5th+Ave,+New+York,+10016&amp;ll=40.744556,-73.987378&amp;spn=0.005763,0.013078&amp;t=m&amp;z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small>

回答by jeff

To customize the interface, I believe you have to delve into the Google Maps API.

要自定义界面,相信你必须深入研究谷歌地图API。

Using the Google Maps API, you can set disableDefaultUIto true.

使用 Google Maps API,您可以设置disableDefaultUI为 true。

HTML File:

HTML文件:

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="map.js"></script>
</head>
<body>
    <div id="map" style="width:200px; height:200px;" />
</body>
</html>

JavaScript file:

JavaScript 文件:

window.onload = function() {
    var myOptions = {
        center: new google.maps.LatLng(40.744556,-73.987378),
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);
}

回答by Nikola Anusev

I don't believe it is possible to hide controls when embedding the map. You will need to create a map in javascript by using Google Maps API- in lines of the following:

我不相信在嵌入地图时可以隐藏控件。您需要使用Google Maps API在 javascript 中创建地图- 如下所示:

var mapContainer = document.getElementById('mapContainer');
var mapOptions = {
    panControl: false,
    zoomControl: false,
    scaleControl: false,
};
var map = new google.maps.Map(mapContainer, mapOptions);

回答by Vitor Deco

There is not a parameter to hide the controls using IFRAME, look on the following link to see the possible parameters:

没有使用 IFRAME 隐藏控件的参数,请查看以下链接以查看可能的参数:

http://moz.com/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters

http://moz.com/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters

If you do not want to use the API, you can use CSS to hide the edges of the map:

如果不想使用 API,可以使用 CSS 来隐藏地图的边缘:

CSS:

CSS:

.mapaThumb { position:relative; }
.mapaThumb iframe{ width:200px; height:240px; margin-top:-40px; margin-left:-10px; }
.mapaThumb .mapaItem{ overflow:hidden; height:150px; }

HTML:

HTML:

<div class="mapaThumb">
    <div class="mapaItem">
        <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.br/maps?f=q&amp;source=s_q&amp;hl=pt-BR&amp;geocode=&amp;q=brazil&amp;aq=&amp;sll=-21.086832,-42.409844&amp;sspn=0.895645,1.674042&amp;ie=UTF8&amp;hq=&amp;hnear=Rep%C3%BAblica+Federativa+do+Brasil&amp;t=m&amp;z=4&amp;ll=-14.235004,-51.92528&amp;output=embed"></iframe>
    </div>
</div>

It is not the most correct, but it works! Old trick taught by a Chinese sage.

这不是最正确的,但它有效!china圣人传授的老把戏。

回答by bromelio

Just style your Google map here, click on "Generate Code" and embed it in the <body>of your website.

只需在此处设置您的 Google 地图样式,单击“生成代码”并将其嵌入<body>您的网站。