wangzhe
/
screen-demo


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>坐标定位、坐标拾取</title>
    <link rel="stylesheet" href="../../dist/ol/ol.css" />
    <script src="../assets/vue@2.7.14.js"></script>
    <script src="../../dist/index.js"></script>
    <style>
      body {
        margin: 0
      }
      #map {
        height: 100vh;
      }
      .control {
        position: absolute;
        top: 20px;
        left: 40px;
        padding: 10px 10px 0;
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="map"></div>
      <div class="control">
        <label>坐标</label>
        <input type="text" v-model="longitude" placeholder="经度">
        <input type="text" v-model="latitude" placeholder="纬度">
        <br>
        <template v-if="ready">
          <button @click="locate">定位</button>
          <button @click="pick">拾取</button>
          <button @click="_ => location.stopPick()">停止拾取</button>
          <button @click="destroy">销毁</button>
        </template>
        <template v-else>
          <button @click="init">初始化</button>
        </template>
        <p>注意：Vue项目中<b>不要</b>将地图相关实例对象赋值给响应式变量</p>
      </div>
    </div>
  </body>

  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          longitude: '',
          latitude: '',
          ready: false
        }
      },
      mounted () {
        this.map = new CTMapOl.extend.InitMap({
          domId: 'map'
        })
        this.init()
      },
      methods: {
        init () {
          // 不要在 data 中定义 location 变量，无需响应式
          this.location = new CTMapOl.extend.ToolLocation(this.map.map, {
            onPick: coords => {
              this.longitude = coords[0]
              this.latitude = coords[1]
            }
          })
          this.ready = true
        },
        locate () {
          this.location.locate([+this.longitude, +this.latitude])
        },
        pick () {
          this.location.pick()
        },
        destroy () {
          this.location.destroy()
          this.location = null
          this.ready = false
        }
      }
    })
  </script>
</html>