天地图如何创建类似百度地图的标点信息窗口？

Question

最近因百度地图部分接口开始收费，想要用天地图代替百度地图，但奈何天地图没有类似百度地图的标点打开的信息窗口，请问各位前端有没有好的解决办法做成类似百度地图的信息窗口？

Answer 1

1. 在天地图上添加标注(Marker),并为其绑定点击事件
2. 点击事件中创建一个信息窗口div,设置样式使其看起来像百度地图的信息窗口
3. 将信息窗口div添加到地图容器中
4. 计算信息窗口的位置,使其显示在标注位置
5. 为信息窗口div绑定移动事件,在移动过程中更新 its style 和 position
6. 为关闭按钮绑定点击事件,点击后移除信息窗口div
代码示例:
js
// 添加标注
var marker = new qq.maps.Marker({
  position: new qq.maps.LatLng(39.9, 116.4),
  map: map
});

// 点击标注显示信息窗口
marker.addEventListener("click", function(e) {
  var div = document.createElement("div");
  div.style.position = "absolute";
  div.style.zIndex = 1;
  div.style.background = "white";
  div.style.border = "1px solid #ccc";
  div.style.padding = "10px";
  div.innerHTML = "<span>我是信息窗口</span><button>关闭</button>";

  // 添加到地图并设置位置
  map.getPanes().floatPane.appendChild(div);
  div.style.left = e.overlay.getPosition().lng - div.offsetWidth / 2 + "px";
  div.style.top = e.overlay.getPosition().lat - div.offsetHeight - 10 + "px";

  // 绑定关闭按钮事件
  div.querySelector("button").addEventListener("click", function() {
    floatPane.removeChild(div);
  });

  // 绑定移动事件
  div.addEventListener("mousemove", function(e) {
    div.style.left = e.offsetX - div.offsetWidth / 2 + "px";
    div.style.top = e.offsetY - div.offsetHeight - 10 + "px";
  });
});
以上代码实现了点击标注弹出的信息窗口,并且可以通过鼠标拖动。希望能帮助到您!