Question

我已经写了一个html（包含CSS和javascript），但是我希望它采用适当的格式，所以我创建了一个有角度的应用程序（带有cli new bla）。 [如果这很重要，则html包含地图。] 我确实将复制粘贴到组件中，并期望它能正常工作，但是页面无法加载。那么如何将html嵌入基本的角度应用程序中？

谢谢

html中有两个脚本，如下所示：

    <script>
  var map;
  var beijing = {lat: 39.9664333333333, lng: 116.469033333333};
  var markers = [];


function initMap() {
  fetch('153-20070724234145.csv')     // Read the file under the given address
  .then(re => re.text())      // Extract the text part of the response
  .then(function (data_array){
    data_array = parseTxt(data_array);      // Parse the read string data to an array
    map = new google.maps.Map(document.getElementById('map'), {     // initialize the map
    center: {lat: Number(data_array[1][0]), lng: Number(data_array[1][1])},
    zoom: 12});
    create_markers(data_array);     // Convert the array of lats and longs into a marker

    // Start visualisation
    var centerControlDiv = document.createElement('div');     // Create a new div in the html
    var centerControl = new CenterControl(centerControlDiv, map);
    centerControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

    // Clear Vis
    var clearControlDiv = document.createElement('div');
    var clearControl = new ClearControl(clearControlDiv, map);
    clearControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.LEFT_CENTER].push(clearControlDiv);
    }
  )
}
</script>

 <script src="https://maps.googleapis.com/maps/api/js?key=sdfkjjkf34kjn&callback=initMap"
async defer></script>

Answer 1

将标记主体中的HTML代码复制到component.html

将脚本复制到结束标签正文之前的./src/index.html

将CSS放入./src/styles.css或将样式表复制到./src/index.html

编辑Google地图：

在您的角度项目中安装Google类型

npm install -D @types/googlemaps

在index.html中，放在结束标记头之前

<script src="https://maps.googleapis.com/maps/api/js?key=changethis"></script>
<script>
function initMap() {
// your function...
}
</script>
</head>

在component.ts中（完整示例，仅复制所需内容）

import { Component, ViewChild, OnInit } from '@angular/core';
import { } from '@types/googlemaps';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('map') gmapElement: any;
  map: google.maps.Map;

  ngOnInit() {  
    this.initMap();

    // uncomment for alternative
    // this.initGoogleMaps();
  }

  initMap() {
    (window as any).initMap();
  }

  initGoogleMaps() {
    const mapProp = {
      center: new google.maps.LatLng(18.5793, 73.8143),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
  }
}

在您的component.html中，这是地图（替代）

<div #map style="width:100%;height:400px"></div>

在这种情况下，简单的路径是：加载googlemaps api =>加载angular app =>加载组件=>调用您的init函数

将HTML嵌入角度应用程序

1 个答案: