Skip to content

基于Vue3的腾讯地图地址可视化拾取、描点,路径规划插件

Notifications You must be signed in to change notification settings

cuteCloud/vue-qqmap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

基于Vue3的腾讯地图地址可视化拾取、描点,路径规划插件

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published