Question

我想要使用angular在google地图上显示一些polyLine坐标的JSON数组。我想从另一个文件导入const数组，而不是如下所示在行中定义它们。

对坐标的更改将极为罕见（它们代表美国几个州的边界），并且数组不足以保证创建新的数据库表和所有相关的管道。它们足以通过在ngOnInit（）中定义来使我的代码变得丑陋。

ngOnInit() {
const mapOptions = {
  center: {lat: 0, lng: -180},
  zoom: 5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
const myMap = new google.maps.Map(document.getElementById("my-map"), mapOptions);

const flightPlanCoordinates = [
   {lat: 37.772, lng: -122.214},
   {lat: 21.291, lng: -157.821},
   {lat: -18.142, lng: 178.431},
   {lat: -27.467, lng: 153.027}
 ];
const flightPath = new google.maps.Polyline({
  path: flightPlanCoordinates,
  geodesic: true,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2
});
flightPath.setMap(myMap);

}

上面的坐标来自Google的文档，但原理是相同的：我希望flightPlanCoordinates和其他坐标数组在一个单独的文件中定义，我可以在该组件中导入和使用它。我没有运气，因为看起来从外部.ts文件导入的任何内容都在运行时超出范围。我只是将数组定义剪切/粘贴到我的外部.ts文件中，因为我不确定需要什么其他支持数据结构。我在打字稿上仍然是绿色的，所以我确定我犯了一个简单的错误。

Answer 1

我在项目中所做的是将其作为const导出到一个单独的文件中：

server.config.ts：

export const ServerConfig = {
    apiEndPoint: ....,
    ...
}

然后在项目中导入它：

import {ServerConfig} from './server.config';

然后我可以使用它：

db = ServerConfig.apiEndPoint;

Answer 2

使用ajax调用或类似的东西，并将结果放在flightPlanCoordinates中。

Google地图来自导入的文件，而不是数据库

2 个答案: