gpt4 book ai didi

google-maps - 如何将Google Map与聚合物一起使用?

转载 作者:行者123 更新时间:2023-12-03 22:29:29 28 4
gpt4 key购买 nike

我想在聚合物元素内显示Google Map。

应当从我的组件外部处理此 map 。

最佳答案

以下是声明包含Google map 的简单自定义元素的方法。在此示例中,必须在组件外部手动处理 map :

  • gmap.html

  • <polymer-element name="gmap-map">
    <template>
    <div id='mapView' style='height: 500px; width: 500px'></div>
    </template>
    <script type="application/dart" src="gmap.dart"></script>
    </polymer-element>
  • gmap.dart

  • import 'package:google_maps/google_maps.dart';
    import 'package:polymer/polymer.dart';

    @CustomTag('gmap-map')
    class MapElement extends PolymerElement {
    GMap map;

    MapElement.created() : super.created() {
    final mapOptions = new MapOptions()
    ..mapTypeId = MapTypeId.ROADMAP;
    final mapView = getShadowRoot('gmap-map').querySelector("#mapView");
    map = new GMap(mapView, mapOptions);
    }

    attached() {
    super.attached();

    // this allow to notify the map that the size of the canvas has changed.
    // in some cases, the map behaves like it has a 0*0 size.
    event.trigger(map, 'resize', []);
    }
    }

    现在,您可以在类似html的文件中使用它(您可以使用元素上的 map getter访问 map 实例):

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>GMaps app</title>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <link rel="import" href="gmap.html">
    <script type="application/dart">
    import 'dart:html';
    import 'gmap.dart' as m;
    import 'package:google_maps/google_maps.dart';
    import 'package:polymer/polymer.dart';
    main(){
    initPolymer();
    m.MapElement mapElement = querySelector('#myMap');
    mapElement.map
    ..panTo(new LatLng(48, 2.5))
    ..zoom = 5;
    }
    </script>
    <script src="packages/browser/dart.js"></script>
    <script src="packages/browser/interop.js"></script>
    </head>
    <body>
    <h1>Gmaps</h1>
    <gmap-map id='myMap'></gmap-map>
    </body>
    </html>

    关于google-maps - 如何将Google Map与聚合物一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19792887/

    28 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com