Git Product home page Git Product logo

amap-vue's Introduction

LiuJi-Jim

Jim Liu's Blog

amap-vue's People

Contributors

liuji-jim avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

amap-vue's Issues

按需引入问题

使用文档方法按需引入,在组件中
import Amap from '@amap/amap-vue/lib/Amap';
import AmapMarker from '@amap/amap-vue/lib/Marker';

出现以下报错,翻看安装的依赖文件夹中并未找到对应文件

These dependencies were not found:

  • @amap/amap-vue/lib/Amap in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/front/ContactUs/index.vue?vue&type=script&lang=js&
  • @amap/amap-vue/lib/Marker in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/front/ContactUs/index.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save @amap/amap-vue/lib/Amap @amap/amap-vue/lib/Marker

polyline开启编辑属性(editable)后,polyline进行编辑存在问题

   polyline开启编辑属性(editable),进行节点移除操作时,节点可以被完全移除,也就是说polyline通过这种方式被移除了。此外,在移除最后两个节点时,控制台报错:“poly.js:1 Uncaught TypeError: Cannot read property 'getPath' of undefined“。
   试了一下高德原生的PolyEditor,在节点只剩两个时,就不允许进行节点移除了。

标注和标注图层的性能问题

使用 amap-labels-layer 和 amap-label-marker 进行标注时性能低下,data 数据小于100 时还比较流畅,但如果标注点达到 500 个左右就开始卡顿,2000 个页面无响应。

但官方文档渲染 30000 点都没有明显卡顿:https://lbs.amap.com/api/jsapi-v2/example/mass-markers/labelmarker-mass

<template lang="pug">
  v-container.fill-height
    amap(key="key" map-style="amap://styles/whitesmoke" :center="data[0]")
      amap-labels-layer(:zooms="[3, 20]")
        amap-label-marker(v-for="(pos, i) in data.slice(0, 100)" :key="i" :position="pos" :icon="icon")
</template>

demo-view 组件在哪里啊?

大佬, 参考示例里面的 <demo-view hide-control @map-complete="ready = true"> 这个 demo-view 组件在哪里啊?

啥时候 支持vue3.0啊

mixins.js:1 Uncaught (in promise) TypeError: n.default.mixin is not a function
at node_modules/@amap/amap-vue/lib/mixins/mixins.js (mixins.js:1)
at __require2 (chunk-YOHASWQG.js?v=419e2a24:15)
at node_modules/@amap/amap-vue/lib/amap.js (amap.js:formatted:311)
at __require2 (chunk-YOHASWQG.js?v=419e2a24:15)
at amap.js:formatted:311

画矩形画不出来

可以画圆,画矩形报错

TypeError: Cannot read properties of null (reading '0')
at VueComponent.y (amap-helpers.js:1:1591)
at c (amap-helpers.js:1:1018)
at VueComponent. (base.js:1:1102)
at _tslib.js:15:1419
at Object.next (_tslib.js:15:1528)
at l (_tslib.js:15:292)


页面发生滚动后跳转至其他后再返回,地图就不显示了

复现步骤:
1.页面A、页面B都包含地图
2.页面A发生滚动后,跳转至页面B
3.从页面B返回至页面A,页面A的地图显示

注:页面A不滚动直接跳转页面B,返回后页面A地图显示正常,这时页面再滚动后跳转至页面B后返回显示还是正常
文档中的页面也是可以复现这个bug的,例如,地图与Marker两个文档例子之间的跳转

bug 反馈

  1. 当前最新的版本:2.0.7,没有文档中的2.0.8
  2. 在vue全局引用一直报
    main.js?56d7:20 Uncaught ReferenceError: AmapVue is not defined

不知道该怎么描述的问题😂

感觉不是amap的问题,但找不到解决方法,这里提一下好了
开发环境没有问题,问题是打包之后会出现模块名被压缩,但是引用没压缩的情况,摸不着头脑。
image
image
如图所示,其他ui模块的压缩都正确执行了,但是amap却被漏掉了,这要怎么解决啊?
导入引用都是按照官网写的,但是导入部分被压缩了,引用还是原样,导致找不到对象了。

MouseTool #使用

当绘制完成时会自动切换回none
怎么设置他不自动切换none

地图掩模异步获取如何在amap组件上绘制?

await loadPlugins(['AMap.DistrictSearch'])

const opts = {
  subdistrict: 0,
  extensions: 'all',
  level: 'city',
}

const district = new AMap.DistrictSearch(opts)

console.log(district)

district.search('北京市', (status, result) => {
  if (result.info === 'OK') {
    const bounds = result.districtList[0].boundaries
    // let mask = bounds.map(v => [v])

    this.amap.mask = bounds.map(v => [v])

    // new Map('container', {
    //   mask: mask,
    //   center: [116.472804, 39.995725],
    //   viewMode: '3D',
    //   showLabel: false,
    //   labelzIndex: 130,
    //   pitch: 40,
    //   zoom: 9,
    //   layers: [
    //     new AMap.TileLayer.RoadNet({
    //       // rejectMapMask:true
    //     }),
    //     new AMap.TileLayer.Satellite(),
    //   ],
    // })
    // let maskerIn = new AMap.Marker({
    //   position: [116.501415, 39.926055],
    //   map: map,
    // })
    // let maskerOut = new AMap.Marker({// 区域外的不会显示
    //   position: [117.001415, 39.926055],
    //   map: map,
    // })
    // // 添加描边
    // for (var i = 0; i < bounds.length; i += 1) {
    //   new AMap.Polyline({
    //     path: bounds[i],
    //     strokeColor: '#99ffff',
    //     strokeWeight: 4,
    //     map: map,
    //   })
    // }

    // for(var i = 0; i < bounds.length; i+=1){
    //     mask.push([bounds[i]])
    // }
  } else {
    console.warn('AMap.DistrictSearch  查询错误!')
  }
})

AMap is not defined

需要用到new Amap.ContextMenu()等其他东西时,会报错 AMap is not defined

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.