Question

我试图解决两个问题。我可以单独解决每个问题，但不能同时解决。

我想要 1.要在我的网站上有一个谷歌地图，当页面加载时已经加载了特定位置，也就是红色箭头的东西 2.摆脱左上角的灰色框

获取位置很容易。你只需使用iframe。我是这样做的：

<div style="border-radius: 250px; width: 500px; overflow: hidden; margin-top: 90px; margin-bottom: 90px;">
    <iframe id="map" width="500" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJm04kiUOHj4AR8NnaLQ2OCXw&key=MYAPIKEY" allowfullscreen></iframe>
</div>

但iframe左上角有一个小盒子。我不希望这样，我需要它消失。

所以我尝试使用Google Maps API。使用JavaScript，我可以删除这样的框：

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

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: -33, lng: 151},
      disableDefaultUI: true
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>

这很好，除了我似乎没有相同的红色箭头设置。这是一个企业的网站，所以我不能只设置lat和lng。我需要红色箭头直接在业务上。我似乎无法在Stack Overflow上找到这两个问题的答案。救命啊！

Answer 1

如果您想使用Javascript API，首先需要查找商家的坐标＆＃39;使用Places API放置ID，然后将其传递到地图中。

在此处查看页面中间的示例 https://developers.google.com/places/place-id

但是，如果您只想隐藏信息框，则可以使用嵌入在＆＃39;视图中的信息。模式：

<iframe src="https://www.google.com/maps/embed/v1/view?key=[your key]&q=place_id:ChIJm04kiUOHj4AR8NnaLQ2OCXw" />

文档中描述了各种嵌入模式 https://developers.google.com/maps/documentation/embed/guide

Answer 2

据我所知，你不能保持红色箭头并同时摆脱灰色框。但你可以用CSS做到这一点。就我而言，我希望我的地图成为一个圆圈。所以我把地图放在一个圆形容器中，容器上有overflow：hidden set。然后我将iframe的宽度和高度设为170％，这将盒子推出视野。然后，只需使用相对定位将箭头推回地图中心即可。我是怎么做到的。

<div id="map_container">
    <iframe id="map" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJm04kiUOHj4AR8NnaLQ2OCXw&key=[MYAPIKEY]" allowfullscreen>
    </iframe>
</div>


#map {
width: 170%;
height: 170%;
position:relative;
top: -120px;
left: -120px;
}
#map_container {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
width: 350px;
height: 350px;
overflow: hidden; 
margin-top: 90px; 
margin-bottom: 90px;
border-radius: 250px;
}

webkit位用于防止全尺寸地图在边缘闪烁。您显然仍需要插入有效的API密钥才能使其正常工作。

设置谷歌地图位置并摆脱框

2 个答案: