根据要求加载 Google 地图标记 HTML答案

【问题标题】：Load Google Map marker HTML on request根据要求加载 Google 地图标记 HTML
【发布时间】：2011-10-11 08:28:05
【问题描述】：

是否可以仅在用户实际点击时加载 Google 地图标记的内容（即“工具提示”中显示的 HTML）？

我在我们的网站上嵌入了一个不错的 Google 地图，它运行良好 - 一次只有 200 个标记。但是现在我们想显示大量的标记（3900+），目前所有用于显示工具提示的微小 HTML 页面都是在添加标记时设置的。理想情况下，此 HTML 将使用 AJAX 加载。

【问题讨论】：

标签： javascript asp.net ajax google-maps

【解决方案1】：

是的，当您添加到地图中的标记被点击时，您需要加载所需的数据，方法是向标记添加点击侦听器。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true_or_false"
type="text/javascript"></script>

<div id="map_canvas"> </div>

<script>
     var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
      var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


      var marker = new google.maps.Marker({
          position: myLatlng, 
          map: map,
          title:"Hello World!"
      });
      google.maps.event.addListener(marker, 'click', function() {

      // When clicked on the marker I use jquery to request some Html 
      // then show in the contents of an info window
        $.ajax({ 
           url: 'http://www.test.com/get-data/',
           dataType: 'html',
           success: function (data) {
               var infowindow = new google.maps.InfoWindow(
                { content: data,
               size: new google.maps.Size(50,50),
               position: marker.position
              });
            infowindow.open(map);
           }

        });

      });

</script>

【讨论】：

啊，非常简单。谢谢！ :)