@vita2333/vmap2.0 v0.0.13

vue3 + 高德地图amap2.0

Base Demo

<template>
	<div class="flex-wrapper">
		<label>经度<input type="number" v-model="lng"></label>
		<label>纬度<input type="number" v-model="lat"></label>
		<label>缩放<input type="number" v-model="zoom"></label>
	</div>
	<vmap :center="[lng,lat]" :zoom="zoom" @click="click" @complete="complete" height="300px" width="300px"></vmap>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
      name: 'BaseDemo',
      components: {},
      computed: {},
      data () {
        return {
          zoom: 10,
          lng: 116.397428,
          lat: 39.90923,
        }
      },
      methods: {
        complete: () => {
          console.log('地图加载完成')
        },
        click: (data) => {
          alert('点击地图')
        },
      },
    },
  )
</script>

Composite Demo

<template>
	<p>结果坐标:{{ position }}</p>
	<p>具体地址:{{ address||'(因为浏览器和api限额等问题,有时可能无法获取具体地址)' }}</p>
	<div class="flex-wrapper">
		<label>地址搜索
			<input id="tipinput" type="text">
		</label>
	</div>
	<vmap :zoom="15" :center="position" :resizeEnable="true" @dragend="onDragend" @click="onClick">
		<vmap-marker v-if="position" :position="position" />
		<vmap-tool-bar position="RT" />
		<vmap-geolocation init-position @getCurrentPosition="onGetCurrentPosition"
		                  v-bind="locationOptions" />
		<vmap-auto-complete @select="onSelect" input="tipinput" />
	</vmap>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'

  import { Vmap, VmapAutoComplete, VmapGeolocation, VmapMarker, VmapToolBar } from '@vita2333/vmap2.0'

  export default defineComponent({
    name: 'CompositeDemo',
    components: { Vmap, VmapAutoComplete, VmapGeolocation, VmapToolBar, VmapMarker },
    computed: {},
    data () {
      return {
        position: undefined,
        address: undefined,
        locationOptions: {
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: 'RB',
          needAddress: true,
          showMarker: false,
          showCircle: false,
          panToLocation: true,
        },
      }
    },
    methods: {
      onSelect (event) {
        console.log('event======================')
        console.log(event)
        console.log('======================')
        this.position = event.poi.location.pos
        this.address = event.poi.district + event.poi.address + event.poi.name
      },
      onGetCurrentPosition (status, result) {
        if (status === 'complete') {
          console.log('result======================')
          console.log(result)
          console.log('======================')
          this.position = [result.position.lng, result.position.lat]
          this.address = result.formattedAddress
        } else {
          throw new Error('定位失败:' + status)
          console.log(result)
        }
      },
      onDragend (event) {
        console.log('======================')
        console.log(event) // todo
        console.log('======================')
        this.position = event.pos
      },
      async onClick (result) {
        this.position = result.pos
      },
    },
  })
</script>