• vue中使用vueamap(高德地图)


    因为项目要求调用高德地图,就按照官方文档按部就班的捣鼓,这一路上出了不少问题。

    前言:

    vue-cli,node环境什么的自己安装设置推荐一个博客:https://blog.csdn.net/wulala_hei/article/details/80488674

    1,找一个磁盘,在里面git bash here

    然后vue init webpack XXX(文件夹名字)

      你       

    第一步:在test里面安装install

    指令:1.npm install

               2.npm install vue-amap --save

    注意:我在安装的时候总是出现了说找不到webpack的问题,

    即:使用 npm run dev 时报错:

    Error: Cannot find module 'webpack-cli/bin/config-yargs'

    可是我用webpack-v找到了版本号,我就删了又装了两三次,还是不行,最后我在安装的过程中没有让其修复,语句不记得了,就是安装过程中出现警告让你输入修复的,然后就成功了。

    第二步:在main.js中加入

    解释一下,key就是你申请的key,一串数字和字母

                  plugin是你在地图上用的组件   例:      

                "AMap.Autocomplete", //输入提示插件
                 "AMap.PlaceSearch", //POI搜索插件
                 "AMap.Scale", //右下角缩略图插件 比例尺
                "AMap.OverView", //地图鹰眼插件
                "AMap.ToolBar", //地图工具条
                "AMap.MapType", //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
                "AMap.PolyEditor", //编辑 折线多,边形
                "AMap.CircleEditor", //圆形编辑器插件
               "AMap.Geolocation" //定位控件,用来获取和展示用户主机所在的经纬度位置
                andmore... ...

    详情https://elemefe.github.io/vue-amap/#/

    但是这个官方文档在vue中使用有些问题,可能是我不知道怎么用吧

    这就是我的代码了,记得给这个div设置高宽

  • 相关阅读:
    理解SynchronizationContext,如何在Winform里面跨线程访问UI控件
    ThreadPool.QueueUserWorkItem引发的血案,线程池异步非正确姿势导致程序闪退的问题
    实战经验分享之C#对象XML序列化
    C#wxpay和alipay
    C#调用windows api 实现打印机控制
    C#winform程序关闭计算机的正确姿势
    自动化控制之线程池的使用
    自动化控制之重码校验
    (转)C#中的那些全局异常捕获
    android studio 2.32躺坑记
  • 原文地址:https://www.cnblogs.com/dcj2018/p/10570827.html
Copyright © 2020-2023  润新知