Question

我使用此脚本显示附近区域的餐厅

<script>
var map_rest;
var infowindow;
function initialize() {
  var restaurant = new google.maps.LatLng(-33.8665433, 151.1956316);
  map_rest = new google.maps.Map(document.getElementById('restaurant-tab'), {
    center: restaurant,
    zoom: 15
  });
    var image_hospital = new google.maps.MarkerImage("http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png", null, null, null, new google.maps.Size(40,52)); 
    var marker = new google.maps.Marker({ // Set the marker
            position: restaurant, 
            icon:image_hospital, 
            map: map_rest
        }); 
  var request_rest = {
    location: restaurant,
    radius: 1000,
    types: ['restaurant']
  };
  infowindow = new google.maps.InfoWindow();
  var service_rest = new google.maps.places.PlacesService(map_rest);
  service_rest.nearbySearch(request_rest, callback_rest);

}
function callback_rest(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker_rest(results[i]);
    }
  }
}
function createMarker_rest(place) {
  var placeLoc = place.geometry.location;

    var image = new google.maps.MarkerImage("http://www.creare.co.uk/wp-content/uploads/2013/08/marker.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
    var marker = new google.maps.Marker({ 
            position: placeLoc, 
            icon:image, 
            map: map_rest
        });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map_rest, this);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

如果我包含第二个脚本并将类型更改为学校或医院， types: ['restaurant']附近的位置并未在最后一个脚本中显示在第一张地图中。

HTML

<ul class="nav nav-tabs" id="myTab">
                                    <li class="active"><a href="#rest" data-toggle="tab"> <i class="fa fa-map-marker"> </i>Restaurant </a></li>
                                    <li><a href="#hospital" data-toggle="tab"> <i class="fa fa-hospital"> </i> Hospitals </a></li>
                                    <li><a href="#school" data-toggle="tab"><i class="fa fa-home"> </i> Schools </a></li>
                                </ul>
                    <div class="tab-content">
                                    <div class="tab-pane active" id="rest">
                                     <div id="restaurant-tab" style="height:500px; width:100%; border:3px solid #acacac;"> </div>
                                    </div>
                                    <div class="tab-pane" id="hospital">

                                    <div id="hospital-tab" style="height:500px; width:100%; border:3px solid #acacac;"> </div>

                                    </div>
                                    <div class="tab-pane" id="school">
                                    <div id="school-tab" style="height:500px; width:100%; border:3px solid #acacac;"> </div>  
                                    </div>
                                </div>

引导标签未加载带有地图的其他标签。

* 这里我通过将地图div放在div *

之外来测试这些地图

所以基本上有两个问题，如何在不同的地图中显示不同的地方以及如何使用在选项卡中加载不活动的地图。

Answer 1

包括bootstrap.js / bootstrap.css，jquery.js和谷歌地图脚本

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tab Load of Map</title>
    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/stylesheet.css" rel="stylesheet">
    <style>
        html, body, .container, .tab-content, .tab-pane {
            height: 100%;
        }
        #map-canvas {
            width: 100%;
            height: 480px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script src="assets/js/jquery-2.0.3.min.js"></script>
    <script>
    var map_rest;
    var infowindow;
    function initialize() {
      var restaurant = new google.maps.LatLng(-33.8665433, 151.1956316);
      map_rest = new google.maps.Map(document.getElementById('map-canvas'), {
        center: restaurant,
        zoom: 15,

      });
        var image_hospital = new google.maps.MarkerImage("http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: restaurant, // Position marker to coordinates
                icon:image_hospital, //use our image as the marker
                map: map_rest, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text
                animation:google.maps.Animation.BOUNCE
            }); 
      var request_rest = {
        location: restaurant,
        radius: 1000,
        types: ['hospital','school']
      };
      infowindow = new google.maps.InfoWindow();
      var service_rest = new google.maps.places.PlacesService(map_rest);
      service_rest.nearbySearch(request_rest, callback_rest);

    }
    function callback_rest(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          createMarker_rest(results[i]);
        }
      }
    }
    function createMarker_rest(place) {
      var placeLoc = place.geometry.location;

        var image = new google.maps.MarkerImage("http://www.creare.co.uk/wp-content/uploads/2013/08/marker.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: placeLoc, // Position marker to coordinates
                icon:image, //use our image as the marker
                map: map_rest, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text
                //animation:google.maps.Animation.BOUNCE
            });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map_rest, this);
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    <script>
    var map_atm;
    var infowindow;
    function initialize_atm() {
      var atm = new google.maps.LatLng(-33.8665433, 151.1956316);
      map_atm = new google.maps.Map(document.getElementById('atm'), {
        center: atm,
        zoom: 15,

      });
        var image_atm = new google.maps.MarkerImage("http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: atm, // Position marker to coordinates
                icon:image_atm, //use our image as the marker
                map: map_atm, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text
                animation:google.maps.Animation.BOUNCE
            }); 
      var request_atm = {
        location: atm,
        radius: 1000,
        types: ['atm']
      };
      infowindow = new google.maps.InfoWindow();
      var service_atm = new google.maps.places.PlacesService(map_atm);
      service_atm.nearbySearch(request_atm, callback_atm);

    }
    function callback_atm(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          createMarker_atm(results[i]);
        }
      }
    }
    function createMarker_atm(place) {
      var placeLoc = place.geometry.location;

        var image = new google.maps.MarkerImage("https://cdn2.iconfinder.com/data/icons/banking-icons-2/512/ATM-128.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: placeLoc, // Position marker to coordinates
                icon:image, //use our image as the marker
                map: map_atm, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text

                //animation:google.maps.Animation.BOUNCE
            });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map_atm, this);
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize_atm);
        </script>

    <script>
    var map_hos;
    var infowindow;
    function initialize_hos() {
      var hospital = new google.maps.LatLng(-33.8665433, 151.1956316);
      map_hos = new google.maps.Map(document.getElementById('hospital'), {
        center: hospital,
        zoom: 15
      });
        var image_hospital = new google.maps.MarkerImage("http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: hospital, // Position marker to coordinates
                icon:image_hospital, //use our image as the marker
                map: map_hos, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text
                animation:google.maps.Animation.BOUNCE
            }); 
      var request_hos = {
        location: hospital,
        radius: 1000,
        types: ['hospital']
      };
      infowindow = new google.maps.InfoWindow();
      var service_hos = new google.maps.places.PlacesService(map_hos);
      service_hos.nearbySearch(request_hos, callback_hos);

    }
    function callback_hos(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          createMarker_hos(results[i]);
        }
      }
    }
    function createMarker_hos(place) {
      var placeLoc = place.geometry.location;

        var image = new google.maps.MarkerImage("https://cdn3.iconfinder.com/data/icons/healthcare-and-medicine-icons-1/512/Hospital-128.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: placeLoc, // Position marker to coordinates
                icon:image, //use our image as the marker
                map: map_hos, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text

                //animation:google.maps.Animation.BOUNCE
            });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map_hos, this);
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize_hos);

    <script type="text/javascript">
    $(document).ready(function () {
    flag_atm = 0;
    flag_hos = 0;   
        $(document).on("shown.bs.tab", '#atmtab', function (e) {
            google.maps.event.trigger(map_atm, 'resize');
            if(flag_atm == 0)
            {
                initialize_atm();
                flag_atm = 1;
            }
        });
        $(document).on("shown.bs.tab", '#hospitaltab', function (e) {
            google.maps.event.trigger(map_hos, 'resize');
            if(flag_hos == 0)
            {
                initialize_hos();
                flag_hos = 1;
            }
            //google.maps.event.addDomListener(window, 'load', initialize_hos);
        });
    });
</script></head>
    <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h1>Google Map Inside Tab Panel</h1>

                       <ul class="nav nav-tabs" id="myTab">
                                        <li class="active"><a href="#home" data-toggle="tab"> <i class="fa fa-map-marker"> </i> Location on Map </a></li>
                                        <li><a href="#profile" data-toggle="tab" id="atmtab" > <i class="fa fa-hospital"> </i> Hospitals </a></li>
                                        <li><a href="#messages" data-toggle="tab" id="hospitaltab"><i class="fa fa-home"> </i> Schools </a></li>
                                    </ul>
                        <div class="tab-content">
                                        <div class="tab-pane active" id="home">
                                         <div id="map-canvas" style="height:500px; width:100%; border:3px solid #acacac;"> </div>
                                        </div>
                                        <div class="tab-pane" id="profile">

                                        <div id="atm" style="height:500px; width:100%; border:3px solid #acacac;"> </div>

                                        </div>
                                        <div class="tab-pane" id="messages">
                                          <div id="hospital" style="height:500px; width:100%; border:3px solid #acacac;"> </div>
                                        </div>
                                    </div>

        </div>
      </div>
    </div>

    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

如何在同一页面上的单独地图中显示Google地图以显示医院和餐馆等地点

1 个答案: