我很难用带角度2的传单标记集插件来实现传单.我之前已经让它在angularJS中工作了.我对角度很新,希望有人能帮我理解出了什么问题.我假设
javascript名称空间冲突与L扮演重要角色,但我只是不确定如何纠正….

因此地图显示,单个标记也是如此.但是,聚集标记根本没有显示出来.

一切都是使用angular-cli和npm设置的.我不得不添加let L = require(‘leaflet’);使得L.MarkerClusterGroup()不会在transile上产生错误.

这是我正在使用的：

/// app.component.ts
import { Component, OnInit } from '@angular/core';
require('leaflet');
let L = require('leaflet');
require('leaflet-markercluster');


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    getRandomLatLng(map) {
      const bounds = map.getBounds(),
      southWest = bounds.getSouthWest(),
      northEast = bounds.getNorthEast(),
      lngSpan = northEast.lng - southWest.lng,
      latSpan = northEast.lat - southWest.lat;
      return new L.LatLng(
        southWest.lat + latSpan * Math.random(),
        southWest.lng + lngSpan * Math.random());
    }
    ngOnInit() {

      const myIcon = L.icon({
          iconUrl: 'assets/images/marker-icon.png',
          shadowUrl: 'assets/images/marker-shadow.png',

          iconSize:     [38, 95], // size of the icon
          shadowSize:   [50, 64], // size of the shadow
          iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
          shadowAnchor: [4, 62],  // the same for the shadow
          popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
      });
      const mapid = L.map('mapid').setView([51.505, -0.09], 13);
      L.tileLayer (
        'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
        { attribution: 'Test', maxZoom: 18}
      ).addTo(mapid);

      let marker = L.marker([51.5, -0.09], {icon: myIcon}).addTo(mapid);
      let markers: any;
      markers = new L.MarkerClusterGroup();
      markers.addLayer(L.marker(this.getRandomLatLng(mapid)), {icon: myIcon});
      markers.addLayer(L.marker(this.getRandomLatLng(mapid), {icon: myIcon}));
      markers.addLayer(L.marker([52.5, -0.09]), {icon: myIcon});
      console.log(markers);
      console.log(marker);
      mapid.addLayerGroup(markers);
      console.log(mapid);
      mapid.setView([52.5, -0.09], 18);


    }
}

的package.json：

    {
  "name": "mc-test",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@types/leaflet": "^1.0.54",
    "@types/leaflet-markercluster": "^1.0.0",
    "core-js": "^2.4.1",
    "geojson": "^0.4.1",
    "leaflet": "^1.0.2",
    "leaflet-markercluster": "^0.2.0",
    "prunecluster": "^2.0.0-beta.3",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

角cli.json：

    {
  "project": {
    "version": "1.0.0-beta.28.3",
    "name": "mc-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/leaflet/dist/leaflet.css",
        "../node_modules/leaflet-markercluster/MarkerCluster.css",
        "../node_modules/leaflet-markercluster/MarkerCluster.Default.css"
      ],
      "scripts": [
        "../node_modules/leaflet/dist/leaflet.js",
        "../node_modules/leaflet-markercluster/leaflet.markercluster-src.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "files": "src/**/*.ts",
      "project": "src/tsconfig.json"
    },
    {
      "files": "e2e/**/*.ts",
      "project": "e2e/tsconfig.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

最佳答案 事实证明,npm install leaflet leaflet-markercluster –save不提供功能代码集.从git安装v1.0.3每个工作：

npm install https://github.com/Leaflet/Leaflet.git#v1.0.3 –save
npm install https://github.com/Leaflet/Leaflet.markercluster.git#v1.0.3 –save