Question

我正在尝试将Google地图插入嵌套的div中。我从网上找到的示例中复制了一些通用代码，以确认可以正常工作。我将该代码粘贴到index.html的body元素中，效果很好。然后，我将相同的代码粘贴到我的app.component.html中，地图未显示。我确保使用以像素为单位的高度和宽度大小，以便它不会对地图容器div使用任何相对大小。此外，当我检查包含地图的元素时，它会在屏幕上突出显示一个大的空方块，其中地图应具有我指定的相同尺寸尺寸。我还注意到，在开发工具中查看map元素时，它没有像已知的好map div那样生成任何额外的嵌套div。

我正在使用的

代码段：

<div style="height:100%; width: 100%">
    <h1>My First Google Map</h1>
    <div id="googleMap2" style="height:400px; width: 400px">insert map</div>
    <script>
        function initMap() {
            var mapProp2= {
                center:new google.maps.LatLng(-33.8478796,150.791894), zoom:17,
            };
            var map=new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
</div>

编辑：我使用的是api键，我只插入了API_KEY作为占位符。

此图显示了浏览器中的外观

Answer 1

将此添加到应用程序内的index.html中 <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"> </script> 并在app.component.html

内部

import { Component, OnInit } from '@angular/core';
declare var google:any;
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

ngOnInit(){
this.getMap();
}

getMap() {

  let mapProp = {
    center: new google.maps.LatLng(23.4866, 80.1066),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    draggable: false
  };
  new google.maps.Map(document.getElementById('gmap'), mapProp);

}
}

Answer 2

您需要为正在使用的域注册并定义API密钥，所以：

https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap

应类似于：

https://maps.googleapis.com/maps/api/js?key=AzOaSyAI_FJ4STEHLG2SlqU8QCilw_Y9_11W8qc&callback=initMap

请注意，Google JS API不再免费；因此，除非您需要使用多个标记等自定义地图，否则在Google地图中使用共享地图功能时最好使用可用的iframe嵌入功能。

Answer 3

如果遇到以下错误：InvalidKeyMapError，则需要获取一个Api密钥（如果已有的话）

启用Api操作

转到API管理器
点击概述
搜索Google Maps JavaScript API（在Google Maps API下）。点击那个
您将在此处找到“启用”按钮。单击以启用API。

希望这将解决启用API的问题

谷歌地图没有显示在嵌套的div

3 个答案: