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

• 中文
• English

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