- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试将 googlemaps 实现到我的 angular-cli 项目中。我知道有一个“angular2-google-maps”组件 ( github ),但我需要路线和更多自定义功能。
我发现了两种将 map 实现到项目中的方法:
1:stackoverflow : 使用 google api 加载程序 - 但我不知道如何初始化 google-maps...
2:使用 DefinitelyTyped google.maps.d.ts .我将它与 --global (因为 ambient ist deprecated..)一起安装到我的项目中,并将 index.d.ts (用于全局)添加到 src/typings.d.ts 并且可以使用“google.map ..” .ts 文件:
myLatLng = {lat: -25.363, lng: 131.044};
map:any;
constructor() {
this.map = new google.maps.Map(document.getElementById('map'), {
center: this.myLatLng,
zoom: 4
});
}
但是如果我用 angular-cli 构建它,它会出错:“ReferenceError:未定义谷歌”
有什么想法吗?
最佳答案
这里是将 google maps 组件添加到 angular-cli 项目的分步指南。
第 1 步:从 DefinitelyTyped 安装 google.maps:
typings i dt~google.maps --global --save
第 2 步:如果您安装了较旧的类型,请添加
/// <reference path="../typings/index.d.ts" />
到你的 src/typings.d.ts
第三步:生成新组件
ng g component google-maps
将以下代码添加到:
.ts:
height = '100px';
myLatLng = {lat: -25.363, lng: 131.044};
map:any;
constructor(private googleApi:GoogleApiService) {}
ngOnInit() {
this.googleApi.initMap().then(() => {
let latlng = new google.maps.LatLng(this.myLatLng.lat, this.myLatLng.lng);
this.map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 4
});
new google.maps.Marker({
position: latlng,
map: this.map,
title: 'Hello World!'
});
});
}
.html :
<div id="map" [style.height]="height"></div>
第四步:生成新服务
ng g service google-maps/shared/google-api
将 GoogleApiService + HTTP_PROVIDERS 添加到 src/main.ts
代码:
const API_KEY = '[insert your code]';
const url = 'https://maps.googleapis.com/maps/api/js?key='+ API_KEY +'&callback=initMap';
@Injectable()
export class GoogleApiService {
private loadMap: Promise<any>;
constructor(private http:Http) {
this.loadMap = new Promise((resolve) => {
window['initMap'] = () => {
resolve();
};
this.loadScript()
});
}
public initMap():Promise<any> {
return this.loadMap;
}
private loadScript() {
let script = document.createElement('script');
script.src = url;
script.type = 'text/javascript';
if (document.body.contains(script)) {
return;
}
document.getElementsByTagName('head')[0].appendChild(script);
}
}
也许您需要从 spec.ts 文件中删除一些行。但随后您可以将 GoogleMapsComponent 添加为指令。
关于angular - 将 googlemaps 添加到 angular-cli,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37807987/
我在全局范围内安装了最新的 angular-cli,并且我的项目正在成功构建。 在阅读另一个问题的建议解决方案时,(https://github.com/angular/angular-cli/iss
根据official docs关于 .angular-cli.json 配置文件,仅支持 main、test、polyfills 作为 webpack 入口文件。 如何通过定义 .angular-cl
我想在s3存储桶中搜索文件名abc.zip,并且有将近60个存储桶,每个存储桶都有2到3个级别的子目录或文件夹。我尝试使用AWS CLI命令执行搜索,以下是我尝试过的命令,但即使文件存在于存储桶中,也
我正在尝试在 C++/CLI 中查找赋值运算符和复制构造函数的示例。我在 Google 上花了很多时间,但令人惊讶的是我找不到一个看起来很常见的例子。 最佳答案 .NET 语义没有复制构造函数或赋值运
我需要获取另一个窗口的句柄。 这是它的代码: private: System::Void btn_find_Click(System::Object^ sender, System::EventAr
有点好奇实际上有多少人使用 C++/CLI?那么有多少人在使用它呢?人们是否只在托管环境下寻找程序员的特定工作?围绕 c++/cli 的社区有多大?从我目前看到的情况来看,有不少语法变化,作为 C++
我正在阅读一些 C++/CLI Material ,并且遇到了文字字段的概念: literal int inchesPerFoot = 12; 这是否比 const 更可取,因为 const FIEL
通过 npm install -g angular-cli@latest 安装 Angular CLI (angular-cli@1.0.0-beta.16) 失败,出现以下错误 npm-debug.
我正在尝试在我的 Ember CLI 应用程序中配置适配器以根据环境使用不同的主机。在开发中,我希望它是默认的当前主机(让我通过 --proxy 选项自定义它,但在生产中我知道它将是 http://s
我最近开始使用 Angular/CLI 工具,我在执行文件时遇到了一个问题,那就是我运行时 ng serve 那么这个命令可以帮助我们在源文件中进行任何更改时自动重新加载站点,但在我的系统中它没有发生
是否有推荐的方法通过 c++ cli 包装 native c++ 库? 最佳答案 不确定是否一种尺寸适合所有人,但是,是的,这很大程度上是一个机械过程。您的 ref 类包装器应该声明一个私有(priv
我有一个关于为要在 C# 中使用的 native C++ 类创建 C++ CLI 包装器的问题。 这是一个示例代码: #include "stdafx.h" #pragma once using na
下面的代码打印 0 和 3。这是代码生成错误吗?我在 .NET 4.0 下使用 Visual Studio 2012 Update 3 RC 运行它 #include "stdafx.h" using
它是如何工作的?它是否有不同的部分 - 有些方法是托管的,有些是非托管的,它是否将每个方法都转换为托管的,试图保持所有东西都处于托管状态并在必须时进行互操作调用? 最佳答案 三种不同的compiler
如果我没记错的话,函数必须是 CLR 世界中类的成员,而全局函数在 C++/CLI 中是可能的。这是否意味着这些全局函数是某种隐藏的“全局”类的一部分?如果是这样,出于反射目的,人们将如何获取其类型?
如何在 Angular 中重建我的项目。我首先使用 ng build 构建它,但无法再次执行该命令,因为它不会让我更改文件夹。 我收到此错误消息: EPERM:不允许操作,lstat 是否有另一个命令
我遇到了两个相互引用的类的问题。我曾尝试使用接口(interface)来解决问题,但遇到了其他问题,例如类重新定义。我只是不确定如何正确执行此操作。 这是我正在做的事情的一个例子。注意:我已经去掉了所
我是 React.js 的新手,我正在尝试从 tutorialspoint 上的教程中学习但我遇到了错误。这是我执行 npm start 命令时控制台上的错误: C:\Users\HP\Desktop
我正在尝试将我的 angular cli 和 angular core 从 12 升级到 13,但看起来存在对等依赖性问题。有人遇到过这个问题吗? npx @angular/cli@13 update
我正在我的 ubuntu 上安装 influxdb_2.0.9,我按照这里的说明操作: https://docs.influxdata.com/influxdb/v2.0/install/?t=Lin
我是一名优秀的程序员,十分优秀!