vue3-icinfo-amap

Vue 3 + TypeScript + Vite

Recommended IDE Setup

打包发布到 npm

1. npm run build:lib
2. 生成 dist 文件夹
3. npm publish

4. 使用组件的文件夹：npm i vue3-icinfo-amap

高德地图-web服务

npm install vue3-icinfo-amap

父级：main.ts 中：

import tenct from 'vue3-icinfo-amap';
const { AmapWeb } = tenct;
Vue.use(AmapWeb);

xxx.vue 中：

<AmapWeb
    keyAmap="xxxxxxxx"
    :mapVal="{lng: 120.209902,lat: 30.246567,}"
    @mapRes="mapRes"
/>

注意：这里做了 PC 端和移动端的判断，展示不同样式。
移动端：建议打开一个地图选择的页面；
PC端：建议一个弹框

参数：
    keyAmap: web服务的Key (注意是web服务)
    version: 版本号,目前默认 1.4.15
    serchMark: 能否搜索, 默认true
    moveMark:  能否移动, 默认true
    resValMark: 是否展示选中后的地址, 默认true
    btnMark: 确定-取消 是否显示, 默认true
    mapVal: {lng: 120.209902, lat: 30.246567,} 经纬度，默认杭州市

插槽：
    搜索 的 label, 默认文字“地址”
    <template v-slot:label></template>
    搜索 的 图标, 默认 放大镜
    <template v-slot:icon></template>

    确定-取消 按钮
    <template v-slot:footer-btn></template>

事件：
    @mapRes="mapRes"
    返回值：
        如果点击“取消”：直接返回 false

        如果点击“确定“：btnMark = true
        如果是拖拽改变地点了，btnMark = false

            btnMark: true || false,
            resVal: this.resVal, // 具体地址：省市区街道楼
            lng: this.LatLng.lng,// 经度
            lat: this.LatLng.lat,// 纬度
            resCode: this.resCode,// 省市区街道code "330102014000"