1. vue-qqmap

vue-qqmap

vue-qqmap

Tencent Map Plugin for Vue 3.x

Shorter Name:vqqmap

Vue3 - based Tencent map visual pick up, tracing points, path planning plug-in

Languages

Results show

DEMO

Features

  1. Simple and easy to use, light and beautiful
  2. Support native map all configuration
  3. More features will be provided in the future

If you like , please give me star,thanks!

If you have some question , please submit issues!

Installation

With npm

 $ npm install vue-qqmap

Typical use:

 <vqqmap v-model="location" @update="mapChange" :options="options"></vqqmap>
   ...
  import vqqmap from 'vue-qqmap'
  ...
  export default defineComponent({
      components: { vqqmap },
      setup() {
        let location = reactive({lat:'',lng:'',address:''})
        let options= reactive({
          key:'Yours Key',
        })
        function mapChange(data){
          console.log(data)
        }
        return {
          location,
          options,
          mapChange
        };
  },
});
  ...

v-model

Type: Object|Array

Required: true

Default: {lat:'',lng:'',address?:''}|[{lat:'',lng:'',address?:''},{lat:'',lng:'',address?:''}]

props

You can send these props to the component

multiple

Type: Boolean

Required: false

Default: false

if you want to set multiple marks,should open it

options

In addition to the following configuration, you can also use all Tencent Map Options

key

Type: String

Required: true

No Key, go apply?

width

Type: String,Number

Required: false

Default: 700

height

Type: Number

Required: false

Default: 400

showHeader

Type: Boolean

Required: false

Default: true

showFooter

Type: Boolean

Required: false

Default: true

showBorder

Type: Boolean

Required: false

Default: true

zoom

Type: Number

Required: false

Default: 12.2

disabledClick

Type: Boolean

Required: false

Default: false

Of course,you can use other tencent map options, look more!

Events

update Triggered when coordinates and addresses change

blog