Question

我想在简单的Angular Dart项目中包含谷歌地图

将Google地图添加到网页的标准方法是在html中定义以下div

<div id="map_canvas"></div>

然后在代码

中包含以下内容

GMap  map = new GMap( querySelector("#map_canvas"), mapOptions);

所有标准内容但它不遵循'角度模式'，其中控制器上的字段通过ng属性链接到html。

据我所知，你必须在创建GMap对象之前有html元素，所以元素必须以某种方式注入控制器???

有人可以告诉我怎么做吗？

由于理查德

Answer 1

您可以创建如下组件：

import 'dart:html';

import 'package:angular/angular.dart';
import 'package:google_maps/google_maps.dart';

@Component(selector: 'google-map', template: "<div id='map_canvas'></div>")
class GMapComponent implements ShadowRootAware {
  GMapComponent();

  @override
  void onShadowRoot(ShadowRoot shadowRoot) {
    final mapCanvas = shadowRoot.getElementById('map_canvas');
    GMap  map = new GMap(mapCanvas, mapOptions);
  }
}

Answer 2

我最终将其改为使用现在有效的普通组件模式。

library gmapcomponent;

import 'dart:html';

import 'package:angular/angular.dart';
import 'package:google_maps/google_maps.dart';

@Component(selector: 'google-map',
  templateUrl: '/packages/lightning/gmapcomponent.html', 
  cssUrl: '/packages/lightning/gmapcomponent.css',
  publishAs: 'gmap')
class GMapComponent implements ShadowRootAware {

  @override
  void onShadowRoot(ShadowRoot shadowRoot) {
    print( "in onShadowRoot");
    final mapCanvas = shadowRoot.getElementById('map_canvas');

    MapOptions mapOptions = new MapOptions()
          ..zoom = 4
          ..center = new LatLng(-34.397, 150.644)
          ..mapTypeId = MapTypeId.ROADMAP;
    GMap  map = new GMap(mapCanvas, mapOptions);
  }
}

html就是

<div id='map_canvas'></div>

和css是

#map_canvas { height: 100%;}

使用带有Dart角度的GMap

2 个答案: