vue-qqmap

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

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