Question

在此代码中，{draggable:'true'}功能不被接受并产生错误：

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';

import * as Leaflet from 'leaflet';

@Component({
  selector: 'page-street',
  templateUrl: 'street.html'
})
export class StreetPage {
 private latLng: any;
  private marker: any;
  private map: any;  
  constructor(public navCtrl: NavController) {

  }
  ngOnInit(): void {
    this.drawMap();
  }
  drawMap(): void {
    let map = Leaflet.map('map');
    Leaflet.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      maxZoom: 15
    }).addTo(map);

    map.locate({ setView: true});
    function onLocationFound(e) {      
      var radius = e.accuracy / 3;     
      Leaflet.marker(e.latlng, {draggable:'true'}).addTo(map);
      Leaflet.circle(e.latlng, radius).addTo(map);
    }
    map.on('locationfound', onLocationFound);
    //alert on location error
    function onLocationError(e) {
      alert(e.message);
    }
    map.on('locationerror', onLocationError);
  }   
}

任何解决它的想法？

更新

{draggable:'true'}的

错误：

打字稿错误 类型'{draggable：string; }' 不是可分配给“MarkerOptions”类型的参数。财产类型 'draggable'是不相容的。类型'字符串'不能分配给类型 “布尔型

{draggable: true}的

错误：

打字稿错误类型'{draggable：true; }'不能分配给'MarkerOptions'类型的参数。物业'选项'是缺少类型'{draggable：true

Answer 1

首先使用

{draggable:true}

这里，true是一个布尔值而不是你的'true'，它是一个字符串。 TypeScript将您的代码视为具有字符串属性的对象，该字符串属性无法分配给变量，该变量是具有名为“draggable”的布尔属性的对象

预期的类型还需要'options'属性。你应该能够通过查看MarkerOptions的定义来弄清楚你应该在选项中添加什么。

你可能已经为'leaflet'下载了一些Typeing（.d.ts），它为MarkerOptions设置了一些限制太多的定义。

让我们说你已经用它来获得这种打字

npm install @ types / leaflet

选项1：查找为MarkerOptions所做的声明，并根据您的目的更改它或更改您的参数以匹配该定义。

选项2：在已下载的声明文件中找到“标记”功能的声明，并将第二个参数的类型从“MarkerOption”更改为“any”

最终你的index.d.ts看起来应该是这样的

   export interface MarkerOptions extends InteractiveLayerOptions {
        icon?: Icon;
        clickable?: boolean;
        draggable?: boolean;
        keyboard?: boolean;
        title?: string;
        alt?: string;
        zIndexOffset?: number;
        opacity?: number;
        riseOnHover?: boolean;
        riseOffset?: number;

        options?: DivIconOptions;
    }

    export class Marker extends Layer {
        constructor(latlng: LatLngExpression, options?: MarkerOptions);
        getLatLng(): LatLng;
        setLatLng(latlng: LatLngExpression): this;
        setZIndexOffset(offset: number): this;
        setIcon(icon: Icon): this;
        setOpacity(opacity: number): this;
        getElement(): HTMLElement;

        // Properties
        options: MarkerOptions;
        dragging: Handler;
    }

在Ionic2 Leaflet标记中是不是接受Draggable功能？

1 个答案: