小编kbo*_*oul的帖子

我在 Angular 5 中有一个项目，我正在尝试使用 Google gapi.auth2 库实现登录。我被这个错误困住了：

ERROR in ./src/app/signin.service.ts
Module not found: Error: Can't resolve 'gapi.auth2' in 'C:\Users\Javier\workspace\angular-tour-of-heroes\src\app'

该错误似乎与我在服务中导入库的方式有关。
我的实现包括"@types/gapi.auth2": "0.0.47",通过添加到 package.json 文件npm install --save @types/gapi.auth2。添加import gapi.auth2到signin.service.ts，这是我试图从中调用gapi的Angular服务。

包.json

{
 "name": "angular-tour-of-heroes",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.5",
    "@angular/cdk": "^5.2.1",
    "@angular/common": "^5.2.5",
    "@angular/compiler": "^5.2.5",
    "@angular/core": "^5.2.5",
    "@angular/forms": …

我想实现bingmap在角6使用“角图” NPM包，我已经请参考也被称为 问题陈述：在node_modules没有创建“bingmaps”文件夹

app.module.ts

/// <reference path="node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts" />
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MapModule, MapAPILoader, BingMapAPILoaderConfig, BingMapAPILoader, WindowRef, DocumentRef, MapServiceFactory, BingMapServiceFactory } from "angular-maps";
import { AppComponent } from './app.component';

错误：

./node_modules/angular-maps/fesm5/angular-maps.js 中的错误模块未找到：错误：无法解析 'D:\bingmap\bingmap\node_modules\angular-maps\fesm5' 中的 'bingmaps' i ?wdm ?: 编译失败。src/app/app.module.ts(1,23) 中的错误：错误 TS6053：文件 'D:/bingmap/bingmap/src/app/node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts ' 未找到。

也安装了 npm install --save @types/bingmaps

在以下链接中，有在线演示案例展示了如何使用 esri-leaflet-geosearch 插件，https: //codepen.io/exomark/pen/dafBD

var searchControl = new L.esri.Controls.Geosearch().addTo(map);

var results = new L.LayerGroup().addTo(map);

searchControl.on('results', function(data){
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
});

这个在线演示可以很好地支持地理搜索功能。

在我的 React 应用程序中，我还计划添加诸如用于传单的搜索框。但无法弄清楚如何做到这一点。

由于esri-leaflet-geosearch取决于esri-leaflet，所以安装了两个 npm 包，但找不到下一步。所以有什么帮助吗？

我试图在地图上方放置一个 div ，以放置一些操作，例如过滤器和其他内容，但该 div 仅在我移动地图时出现，并且它位于地图后面。

组件CSS：

.map {
    padding: 0;
    position:relative;
    width:100% ;
    height: 100%;
}

.mapContainer{
        width: 100vw;
        height: 92.6vh; /* Fallback for browsers that do not support Custom Properties */
        height: calc(var(--vh, 1vh) * 92.6);
        padding: 0 ;
}

.overlay {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(255, 50, 50, 0.5);
}

组件 html ：

<div class="container-fluid" >
    <div class="row">
        <div class="col-sm-2">
            <div *ngIf="city">
                <p>{{city.name}}  </p>
            </div>
        </div>
    <div class="col-sm-10 mapContainer" >
        <div …

这是我的代码示例，但我不知道如何取值和使用后

class View extends Component {
  componentDidMount() {
      var id = {match.params.id}
    }
    render() {
      return(
        <Router>
      <div>
        <Route path="/View/:id" component={Child}/>
      </div>
    </Router>
      )
    }
}

我正在尝试打补丁/并发布对服务器的调用，但它永远不会到达服务器。我试过用邮递员做这件事，它在那里工作。所以我很确定它与我的代码有关。

基本上，我的帖子和补丁是一样的，所以我只会展示补丁。

protected patch(url: string, body: any): Observable<any> {
    let options = this.getRequestOptions(body);
    return this.http.patch(this.baseUrl+url,JSON.stringify(body),options);
}
private getRequestOptions(body:any):RequestOptions{
    let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: cpHeaders });

    return options;
}

请注意，this.baseUrl = "http://localhost/blah/api/和 url 被传递为test;

我很感激这里的任何帮助。提前致谢

更新

   [HttpPut]
    public virtual IHttpActionResult Patch([FromBody]T entity)
    {
        return Ok(_repository.Patch(entity));
    }

    [HttpPatch]
    public virtual IHttpActionResult WebPatch([FromBody]T entity)
    {
        return this.Patch(entity);
    }

我有一个代理配置，如下面的评论所示。

 {
  "/api": {
    "target": "http://localhost/QuickQuoteApi",
    "secure": false,
    "pathRewrite": {
      "^/api": "" …

我使用一种类型的 Angular 5：“@types/markerclustererplus”：“2.1.28”。这种类型安装@types/google-maps。

我在“index.html”文件中添加了脚本部分来加载地图。在我的组件中，我可以使用 google 命名空间。这工作正常。

但是，当我运行测试时......它失败了！我收到“ReferenceError: google is not defined”

我尝试了很多东西......如果你有任何想法，我接受！

谢谢你。

我试着做一个stackblitz，但是它没有错误地接受我的<mat-form-field>和<mat-label>标签，我导入了所需的组件，但是它不起作用。

但是，如果我在此处发布代码，也许无论如何都可以对我有所帮助，因为我不知道将<mat-label>标签移动到什么位置，<mat-form-field>而appearance="outline"当标签位于中间时使用with 时，我遇到了CSS问题。的input field，我不能移动它，我希望它为中心，但它是在的底部mat-form-field。

如果我调整position:absolute值，问题是，当单击发生时，当标签超出字段上方时，这些规则也会被应用，将浮动标签移动到错误的位置。

代码：

<div 
    id="test" 
    fxLayout="row" 
    fxLayoutGap="12px" 
    fxLayoutAlign="start center" 
    [class.hasFocus]="numberMatInput.value">
    <mat-form-field appearance="outline">
         <mat-label>KM</mat-label>
         <input matInput #numberMatInput [formControl]="numberInput">
    </mat-form-field>
</div>

和CSS：

#test ::ng-deep .mat-form-field-appearance-outline {
  width: 65px;
  height: 45px;
  line-height: 1.725;
}

#test ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
  padding: 0px 10px 0px 10px;
}

#test ::ng-deep .mat-form-field-infix {
  padding: 3px 0 3px 0;
}

这是想要的结果：

因此，基本上，我需要在未触摸输入字段时移动标签，并在焦点对准时将其放置在上方浮动的相同空间中。

在我看来，这两者都只有一条规则，因此，如果我移动未改动的标签，则浮动的标签也会移动。

有人可以帮忙吗？谢谢

有没有其他方法可以在运行时更改 ngx-leaflet 地图坐标？这可以通过谷歌地图实现，我正在尝试对传单做同样的事情。

最初设置后，对 leafletOptions 的更改将被忽略。这是因为这些选项被传递到地图构造函数中，因此无论如何都无法更改它们。因此，在创建地图之前请确保该对象存在。您需要在 ngOnInit 中创建对象或使用 *ngIf 隐藏地图 DOM 元素，直到您可以创建选项对象。

成分：

  private   options = {
      layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© OpenStreetMap contributors'
        })
      ],
      zoom: 7,
      center: latLng([ 46.879966, -121.726909 ])
    };

html:

<div style="height: 500px;"
    leaflet
     [leafletOptions]="(options)"
     ></div>

我试图用传单标记方法绘制大约 50K 点，但由于渲染时间和所需的内存而无法实现。我看到的新方法是使用 Leaflet-canvas 在屏幕上绘制点（而不是在 DOM 中）。我如何在 React leaflet 3.X 中执行此操作。我尝试了 https://www.npmjs.com/package/react-leaflet-canvas-markers 但它不支持传单的V3。

有什么建议吗？