Question

谷歌地图上有一些标记： http://gulfnews.com/culture/map-of-museums-in-the-uae-1.133398

如您所见，在标记点击它会显示左侧的featurecardPanel，其中包含一些数据（名称，描述）

请建议如何实现这个？

Answer 1

你需要做很多事情，但基本上你会把地图放在一个包含div的包装div中，它包含map div和显示你想要的内容的div。将侦听器添加到将显示/隐藏内容div的标记。

var map;
var overlayShown = false;

map = new google.maps.Map(document.getElementById("map_div"), {
  center: new google.maps.LatLng(33.808678, -117.918921),
  zoom: 12,
  mapTypId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({    
    position: new google.maps.LatLng(33.803333, -117.915278),
  map: map
});

google.maps.event.addListener(marker, "click", function() {
  var overlay = document.getElementById("map-overlay");
    if (!overlayShown) {
    overlay.setAttribute("class", "map-overlay-show");
    overlay.innerHTML = "Put some content here.";
    overlayShown = true;
  } else {
        overlay.className = "";
    overlay.innerHTML = "";
    overlayShown = false;
  }
});

这是一个粗略的JSFiddle

在谷歌地图标记点击显示featurecardPanel

1 个答案: