Question

我想要做的是在点击元素后创建地图。我正在使用谷歌地图v3。

我有一个Realty列表页面，每页显示15个结果/属性。我想要在单击元素时创建1个地图，而不是生成15个地图。单击后，将生成地图生成过程。地图canvas / div最初是隐藏的。

我认为click元素和map元素的关系是这样的：

<span id="12-1234" lat="10.101010" lng="-25.252525" class="view-map">View Map</span>
... other markup ...
<div id="12-1234-map" class="google-map"></div>

使用HTML5我将自定义属性添加到关于属性的元素，如 id ，纬度和经度，这样我就可以更改图标和中心地图。

我有一张功能正常的地图，我根据搜索参数从动态生成的XML文件中加载标记。

我一直在看addListener和addDomListener，但没有运气。大多数搜索都会引发与标记相关的问题。

我有一个很奇怪的东西，使用jQuery工作。像这样：

$('.view-map').click(function(){
     google.maps.event.addDomListener( this, 'click', initialize );
     $("#" + this.id + "-map").toggle();
});

显然这并不完美，因为你必须在看到地图之前多次点击该元素，因为你已经点击它之后将另一个点击事件绑定到它。

我觉得我错过了一些明显的东西。

Answer 1

function initialize(link) {
  var mapDiv = $('#' + link.attr('id') + '-map');
  mapDiv.toggle();

  var options = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(link.attr('lat'), link.attr('lng'))
  };

  var map = new google.maps.Map(mapDiv[0], options);
}

$('.view-map').click(function(){
  initialize(this);
});

Answer 2

在view-map click函数中，只需调用map initialize方法，传入适当的值。然后，此初始化函数可以显示地图div，然后适当地初始化地图。

丑陋且未经检查的例子：

var params = {
  lat : 47.5,
  lng : -122.5 }

$('.view-map').click(params, function(){
  params.id = this.id //e.g. 1234
  initialize(params);
  });

function initialize(params){
 // show the 1234-map div, initialize the map
}

单击元素后创建Google Map v3

2 个答案: