maptalks - InfoWindow bind MVVM component

InfoWindow bind MVVM component

index.html

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Control and UIComponents - InfoWindow bind MVVM component</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    #app,.container{width:100%;height:100%}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>
    <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
    <div id="app">
        <div ref="map" class="container"></div>
        <div v-show="show">
            <div ref="infowindow_content">
                <h2>{{name}}</h2>
                <input type="text" v-model="name"/>
                <h4>count:{{count}}</h4>
                <button @click="add">count++</button><br><br>
                <button v-for="item in btns">{{item}}</button>
            </div>
        </div>
    </div>
    <script>
      // eslint-disable-next-line no-unused-vars
      var vm = new window.Vue({
        el: '#app',
        data: {
          show: false,
          count: 1,
          name: 'Hello Maptalks',
          btns: [1, 2, 3, 4, 5, 6, 7, 8, 9]
        },
        watch: {

        },
        methods: {
          add: function() {
            this.count++;
          }
        },
        mounted: function() {
          var map = this.map = new maptalks.Map(this.$refs.map, {
            center: [-0.113049, 51.498568],
            zoom: 14,
            // devicePixelRatio: 2,
            baseLayer: new maptalks.TileLayer('base', {
              urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
              subdomains: ["a","b","c","d"],
              attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
          });

          var layer = new maptalks.VectorLayer('layer').addTo(map);
          var marker = new maptalks.Marker(map.getCenter());
          marker.addTo(layer);
          marker.setInfoWindow({
            content: this.$refs['infowindow_content']
          });
          marker.openInfoWindow();

        }
      });



    </script>
  </body>
</html>

// eslint-disable-next-line no-unused-vars
var vm = new window.Vue({
  el: '#app',
  data: {
    show: false,
    count: 1,
    name: 'Hello Maptalks',
    btns: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  },
  watch: {

},
  methods: {
    add: function() {
      this.count++;
    }
  },
  mounted: function() {
    var map = this.map = new maptalks.Map(this.$refs.map, {
      center: [-0.113049, 51.498568],
      zoom: 14,
      // devicePixelRatio: 2,
      baseLayer: new maptalks.TileLayer('base', {
        urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        subdomains: ["a", "b", "c", "d"],
        attribution: '© <a href="http://osm.org">OpenStreetMap</a>  contributors, © <a href="https://carto.com/">CARTO</a> '
      })
    });

var layer = new maptalks.VectorLayer('layer').addTo(map);
    var marker = new maptalks.Marker(map.getCenter());
    marker.addTo(layer);
    marker.setInfoWindow({
      content: this.$refs['infowindow_content']
    });
    marker.openInfoWindow();

}
});