基于Vue3的腾讯地图地址可视化拾取、描点，路径

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 Simple and easy to use, light and beautiful Support native map all configuration 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