小白的高德地图初体验(五)—— 信息窗体

小白的高德地图初体验(五)—— 信息窗体

这里是官方文档☛☛☛传送门，走你~~

☞☞小白的高德地图初体验(一) —— 打点
☞☞小白的高德地图初体验(二)——点聚合
☞☞小白的高德地图初体验(三) —— 轨迹
☞☞小白的高德地图初体验(四) —— 矢量图形
☞☞小白的高德地图初体验(五)—— 信息窗体

---

一、初始化

老规矩先搞一个地图瞅瞅~

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~