Question

我尝试在google map infowindow中显示一张小地图。目的是一旦用户点击标记，就会打开一个infowindow，其中有一个显示卫星视图的小地图。下面的主要代码工作得很好。唯一的问题是我有一个空的'map_loc'，因为我不知道在哪里放'var map_loc'。

我在mysql数据库的while循环中使用查询来获取所需的信息。

基本上我的问题是，我在哪里将代码部分放在下面的主代码中，以显示名为'map_loc'的小地图，其中div位于标记'locations'中：

var map_loc = new google.maps.Map(document.getElementById('map_loc'), {
  zoom: 17,
  center: new google.maps.LatLng(<?php echo $latlng_loc?>),
  mapTypeId: google.maps.MapTypeId.SATELLITE
});

-

<div id="map" style="width:600px; height:600px;"></div>

<script type="text/javascript">
var locations = [
<?php
        while ($x = $req->fetch())
        {
        // variables obtained :
        $name = $d['name'];
        $latlng_loc = $d['latlng']; // I need it to display the marker at the good location but also now to display the map within the infowindow
        ?>
        ['<h3><?php echo $name;?></h3><div id="loc_map" style="width:250px; height:150px;"></div>', <?php echo $latlng_loc?>],<?php
        }
?>
];

// here is the main map
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: new google.maps.LatLng(<?php echo $latlng?>),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

感谢您的帮助。

Answer 1

谷歌地图的infowindow，它可以使用HTML意图..试试这个：示例为1个标记：

var content1 = '<div id="smallmap1"></div>';
var map_loc;
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
  infowindow.setContent(content1);
  infowindow.open(map, marker);
  set_small_map(i);
}
})(marker, i));

//"smallmap"+i == smallmap1, if i == 1;
function set_small_map(i){
     map_loc = new google.maps.Map(document.getElementById("smallmap"+i), {
     zoom: 17,
     center: new google.maps.LatLng(<?php echo $latlng_loc?>),
     mapTypeId: google.maps.MapTypeId.SATELLITE
     });
};

在标记信息窗口中显示地图（谷歌）

1 个答案: