将javascript映射合并到_Javascript_Angular_Typescript_Google Maps

将javascript映射合并到

javascript angular typescript google-maps

将javascript映射合并到,javascript,angular,typescript,google-maps,Javascript,Angular,Typescript,Google Maps,我正试图将JavaScriptGoogleMaps合并到我的Angular 8项目中，以便添加比AGM更多的功能。我已经创建了一个typings.d.ts文件，并将我的javascript包含在angular.json中，但我仍然得到错误：声明了“map”，但从未读取其值。这是我的代码 component.html <body> <div id="map"></div> <script src="https://maps.google

我正试图将JavaScriptGoogleMaps合并到我的Angular 8项目中，以便添加比AGM更多的功能。我已经创建了一个typings.d.ts文件，并将我的javascript包含在angular.json中，但我仍然得到错误：声明了“map”，但从未读取其值。这是我的代码

component.html

  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key={{apiKey}}&callback=initMap"
    async defer>
    </script>
    <script >
    </script>
  </body>
</html>

<div style="width: 1000px;height: 300px;" id="map"></div>

maps.js

import * as map from 'map';
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';

@Component({
  selector: 'app-google-maps',
  templateUrl: './google-maps.component.html',
  styleUrls: ['./google-maps.component.css']
})
export class GoogleMapsComponent implements OnInit {

  private apiKey = environment.googleMapsAPIkey;

  constructor() { }

  ngOnInit() {
  }

}

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

declare module Map {
  export interface Main {
    map;
  }
}
declare var Map:Map.Main;

打字。d.ts

import * as map from 'map';
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';

@Component({
  selector: 'app-google-maps',
  templateUrl: './google-maps.component.html',
  styleUrls: ['./google-maps.component.css']
})
export class GoogleMapsComponent implements OnInit {

  private apiKey = environment.googleMapsAPIkey;

  constructor() { }

  ngOnInit() {
  }

}

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

declare module Map {
  export interface Main {
    map;
  }
}
declare var Map:Map.Main;

下面的代码在开发者模式下显示google地图

html

  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key={{apiKey}}&callback=initMap"
    async defer>
    </script>
    <script >
    </script>
  </body>
</html>

<div style="width: 1000px;height: 300px;" id="map"></div>

组件。ts

constructor() { 

var dynamicScripts = ["https://maps.googleapis.com/maps/api/js?key="apiKey"];

  for (var i = 0; i < dynamicScripts.length; i++) {
    let node = document.createElement('script');
    node.src = dynamicScripts [i];
    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
  }
}
initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
  });

 }
 ngOnInit() {
   setTimeout(()=>{ // 
     this.initMap();
   },2000);
 }

constructor（）{
变量dynamicScripts=[”https://maps.googleapis.com/maps/api/js?key=“apiKey”]；
对于（变量i=0；i{//
this.initMap（）；
},2000);
}

注意我们可以使用promies.then（）代替setTimeout

它说没有使用导入的“map”。将*作为“map”中的map导入；如果不需要，可以使用map或删除import语句。当我引用它时，它说找不到模块。您可以在浏览器中正常显示google maps div而不添加typings.d.ts文件吗？只需包含外部脚本？@PALLAMOLLASAI说，这也是我认为它应该工作的方式……虽然我这样做时没有出错……非常确定我在sript中也正确引用了我的apiKey。谢谢你的帮助，是不是因为它是动态的，所以我不能正常加载它？我想是的。我会尝试搜索更多关于这方面的信息，并让你知道……到目前为止，一切似乎都在工作除了clusterer软件包之外