EN
全部下载
信息框绑定MVVM组件
源码
打开
编辑
复制
index.html
<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>空间与UI组件 - 信息框绑定MVVM组件</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>
已复制！