显示 google map onclick 事件 - Google Map API答案

【问题标题】：Show google map onclick event - Google Map API显示 google map onclick 事件 - Google Map API
【发布时间】：2015-01-28 21:36:09
【问题描述】：

我正在使用谷歌地图 API 来显示用户在地图上的位置。由于 initMap() 触发 onload 事件，用户在页面加载时会看到谷歌地图的一部分。但我想要的是，只显示地图 onclick sub_map 按钮。

为了得到想要的结果，这是我尝试过的，但没有成功。我在 onclick 的 sub_map 按钮之后调用了 initMap()

<form ><input type='submit' id='sub_map' name='sub_map' onclick='open_map(".$userx.");' value='See Map'></form>";

Javascript

function open_map(x){
var user_map=x;

initMap();

var ajax=new XMLHttpRequest();
ajax.open("post","search_results.php",true);
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
ajax.onreadystatechange=function(){
  if(ajax.readyState == 4 && ajax.status == 200){
    document.getElementById('map').innerHTML=ajax.responseText;
  }
}

ajax.send("user_map="+user_map);    

}

谷歌地图部分

var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(40, 40), new google.maps.Point(0,0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
  function addMarker(lat, lng, info) {
    var pt = new google.maps.LatLng(lat, lng);
    bounds.extend(pt);
    var marker = new google.maps.Marker({
       position: pt,
       icon: icon,
       map: map
     });
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300

 });
google.maps.event.addListener(marker, "click", function() {
  if (currentPopup != null) {
   currentPopup.close();
   currentPopup = null;
   }
 popup.open(map, marker);
 currentPopup = popup;
 });
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);

currentPopup = null;
 });
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
//map.panBy(0,30);
//map.setZoom(15);

center: new google.maps.LatLng(0,0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
<?php
 if(isset($_POST['user_map'])){
   $mapusrx=$_POST['user_map'];

   $query = mysqli_query($connecti,"SELECT * FROM map WHERE user_id='$mapusrx'");
    while ($row = mysqli_fetch_assoc($query)){
     $name=$row['title'];
     $lat=$row['lat'];
     $lon=$row['lon'];
     $desc=$row['address'];
     echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
    }
 }
?>
center = bounds.getCenter();
map.setCenter(center);
map.setZoom(16);



}

感谢您的宝贵时间。

【问题讨论】：

那么 search_results.php，Google 地图部分的返回结果是什么？
没什么，它根本没有给我显示地图

标签： javascript mysql google-maps google-maps-api-3

【解决方案1】：

我最终得到了一个解决方案，它给了我想要的结果。我所做的是，像往常一样调用initMap()函数onload事件，但hidemap最初使用visibility:hidden。当sub_map 按钮将是 clicked，map visibility 将可见。

$lee="<script>document.getElementById('map').style.visibility=\"visible\"</script>";

【讨论】：