高德地图部分组件无效和key无效问题

原创已于 2022-07-13 22:05:23 修改 · 6.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

于 2021-07-08 16:11:14 首次发布

高德地图专栏收录该内容

5 篇文章

订阅专栏

高德地图部分组件无效问题

1、比如"AMap.Scale", “AMap.ToolBar”, 这两个，当我版本切换成2.0的时候就加载不出来，我也没在官网哪里能看到限制了，如果是默认1.4.15版本就没事。，加载出来，具体我也不晓得。我是用高德2.0官网推荐的加载方式：

npm i @amap/amap-jsapi-loader --save

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":[],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
    },
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

2、关于高德应用的key问题，主要是web端api和web服务的选择，我遇到pio搜索功能和输入框提示组件失效加载不出的问题。后面发现要选择web端api，但是web服务的介绍也是有这个功能的，具体不知道为啥，在我看来，官网介绍坑：“AMap.PlaceSearch”, “AMap.Autocomplete”

在这里插入图片描述

3、轨迹线功能，以高德2.0加载api的方式，在vue项目使用，在 AMapUI的
plugins:[ “ui/misc/PathSimplifier”]里面加载UI插件一直报错，高德版本设置2.0，后面是在AMapLoader.load()的then回调里面再次调用加载出现的，具体原因，我还是没懂，官网介绍都是那样的，复制代码就是不行。

  AMapUI.load(["ui/misc/PathSimplifier"], function (PathSimplifier) {
            if (!PathSimplifier.supportCanvas) {
              this.$message({ message: "当前环境不支持 Canvas！", type: "warning" })
              return
            }
            that.pathSimplifierIns = new PathSimplifier({
              zIndex: 100,
              // autoSetFitView: false,
              map: that.map, //所属的地图实例
              getPath: function (pathData, pathIndex) {
                return pathData.path
              },
              getHoverTitle: function (pathData, pathIndex, pointIndex) {
                if (pointIndex >= 0) {
                  //point
                  return pathData.name + "，点：" + pointIndex + "/" + pathData.path.length
                }

                return pathData.name + "，点数量" + pathData.path.length
              },
              renderOptions: {
                renderAllPointsIfNumberBelow: -1, //绘制路线节点，如不需要可设置为-1
              },
            })
          })