vue + amap 踩坑 持续更新

奋斗吧 略略略

信息窗口

• 官方示例 // infoWindow.open(map); 无效 必须传入第二个参数 也就是打开窗口在地图中的相对位置

• // infoWindow.open(map, map.getCenter());地图中央打开

• 第二个参数也可以更改为 [经纬度, 经纬度] 形式

• 或者使用mark实例自带的 this._position参数

• V1.4版本

new AMap.InfoWindow({
                                    // isCustom: true,  //使用自定义窗体
                                    // anchor: 'top-left',
                                    content: `
                                        <div style="width: 150px;">
                                        <p>起始位置:${_this.w.custom.startPos}</p>
                                        <p>目标位置:${_this.w.custom.endPos}</p>
                                        </div>
                                    `
                                }).open(map, this.w.position);

• V2.0版本

for (let i in markList) {
                            markList[i].on('click', function () {
                                infoWindow.open(map, this._position);
                                console.log(this._position)
                            })
                        }

插件

AMapLoader.load({
                        "key": "xxx",   // 申请好的Web端开发者Key，首次调用 load 时必填
                        // "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                        "plugins": ['AMap.ToolBar', 'AMap.Scale']  //插件列表
                    }).then((AMap)=>{
                        let map = new AMap.Map('container', {
                            center: [122.227597,40.650903],
                            zoom: 13
                        });

                        var toolbar = new AMap.ToolBar();
                        var scale = new AMap.Scale();
                        map.addControl(toolbar);
                        map.addControl(scale);

版本

默认的1.4.15版本 无法在marker上自定义属性 例如

let marker = new AMap.Marker({
                            custom: {
                                startPos: '营口理工学院',
                                endPos: '森林公园 '
                            }, // 会报错
                            // content: '标记1',
                            icon: truckImg,
                            // content: '张三',
                            position: new AMap.LngLat(122.227597,40.650903),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                            title: '车辆1',
                        });

如果是2.0版本 就不会报错误

• 最好使用默认的1.4.15版本 新的2.0版本还有很多问题