vue + amap 踩坑 持续更新
坑信息窗口官方示例 // infoWindow.open(map); 无效 必须传入第二个参数 也就是打开窗口在地图中的相对位置// infoWindow.open(map, map.getCenter());中中央打开
·
奋斗吧 略略略
信息窗口
-
官方示例
// 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版本还有很多问题
更多推荐
已为社区贡献2条内容
所有评论(0)