小白的高德地图初体验(五)—— 信息窗体
这里是官方文档☛☛☛传送门,走你~~
☞☞小白的高德地图初体验(一) —— 打点
☞☞小白的高德地图初体验(二)——点聚合
☞☞小白的高德地图初体验(三) —— 轨迹
☞☞小白的高德地图初体验(四) —— 矢量图形
☞☞小白的高德地图初体验(五)—— 信息窗体
一、初始化
老规矩先搞一个地图瞅瞅~
initMap() {
MapLoader().then(() => {
this.AMap = window.AMap
let { AMap } = this
this.maps = new AMap.Map("map", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 15
})
this.maps.setFitView()
})
}
不上图了,图已经走丢了,反正有了一张地图。接下来开始表演~~~
二、添加一个默认样式信息窗体
用infoWindow.open和infoWindow.close
就能开关自如啦~~~
open() {
var info = []
info.push("<div><p>看这里,看这里,看这里...</p><p>文本框在这</p></div>")
this.infoWindow = new AMap.InfoWindow({
content: info.join("") //使用默认信息窗体框样式,显示信息内容
})
this.infoWindow.open(this.maps, this.maps.getCenter())
},
close() {
this.infoWindow.close()
}
二、添加一个默认样式信息窗体
接下来是:点击标记点,出现一个介绍框。
在initMap() 方法中添加:
this.marker = new AMap.Marker({
map: this.maps,
position: [116.481181, 39.989792]
})
var info = []
info.push("<div><p>看这里,看这里,看这里...</p><p>文本框在这</p></div>")
this.marker.on("click", e => {
this.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(5, -25),
content: info.join("") //使用默认信息窗体框样式,显示信息内容
})
this.infoWindow.open(this.maps, this.marker.getPosition())
})
大概就是这样的
其实都是来代码都来源于官网,我只是代码的搬运工,大概感受一下如何使用的。只做一下学习记录,如果能帮到你就更好了。
这是两天空闲的时间学习,有两点感受:
其一、万变不离其宗,宗就是官网
其二、很多简单的东西都能变成很难的东西
其三、当你开始上手之后,一切变得简单很多
最后有时间的话会更新的更加完整,需要代码的 ,直接回复、私信都可以的哈~~~
有缘再见ヾ( ̄▽ ̄)Bye~Bye~