Renko's blog

// 点击标识时弹出信息窗口。
function populateInfoWindow(marker, infowindow) {
  // 检查信息窗口还没有在这个标识打开
  if (infowindow.marker != marker) {
    infowindow.marker = marker;
    infowindow.setContent('<div>' + marker.title + '</div>');
    infowindow.open(map, marker);
    // 确保信息窗口关闭时已清空marker属性值
    infowindow.addListener('closeclick', function() {
      infowindow.setMarker = null;
    });
    //此服务根据离标记最近的位置获取全景图像
    //并找出相机朝向、角度(heading,pitch)
    var streetViewService = new google.maps.StreetViewService();
    //寻找街景图像的范围
    var radius = 50;

    function getStreetView(data, status) {
      if (status == google.maps.StreetViewStatus.OK) {
        //取最近的街景位置
        var nearStreetViewLocation = data.location.latLng;
        //计算相机方向，要在加载api时添加&libraries=geometry以使用谷歌地图的几何库
        var heading = google.maps.geometry.spherical.computeHeading(
          nearStreetViewLocation, marker.position);
        infowindow.setContent('<div>' + marker.title + '</div><div id="pano"></div>');
        //设置全景选项
        var panoramaOptions = {
          //最近的街景位置
          position: nearStreetViewLocation,
          //视角
          pov: {
            heading: heading,
            pitch: 30
          }
        };
        //创建街景并将它放在id为pano的div处的信息窗口
        var panorama = new google.maps.StreetViewPanorama(
          document.getElementById('pano'), panoramaOptions);
      } else {
        //如果没有找到街景就在信息窗口放入说明信息
        infowindow.setContent('<div>' + marker.title + '</div>' +
          '<div>No Street View Found</div>');
      }
    }

    streetViewService.getPanoramaByLocation(marker.position, radius, getStreetView);
    infowindow.open(map, marker);
  }
}

<script async defer
    src=
    "https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&libraries=geometry&v=3&callback=initMap">
</script>

var map;
  //加载地图
  function initMap() {
    // Constructor creates a new map - only center and zoom are required.
    map = new google.maps.Map(document.getElementById('map'), {
      //中心 纬度 经度
      center: {lat: 30.317655, lng: 120.343745},
      //缩放值 越高越详细
      zoom: 13
    });

    var markers = [];

    //创建一组位置信息
    var locations = [
      {title:'building 1',location:{lat:30.310597,lng:120.343251}},
      {title:'building 2',location:{lat:30.313089,lng:120.340934}},
      {title:'building 3',location:{lat:30.313103,lng:120.344903}},
      {title:'building 4',location:{lat:30.310653,lng:120.347006}},
    ];

    //创建信息窗口
    var largeInfowindow = new google.maps.InfoWindow();
    //创建经纬度边界
    var bounds = new google.maps.LatLngBounds();

    //通过位置数组初始化创建标识数组
    for (var i = 0; i < locations.length; i++) {
      var position = locations[i].location;
      var title = locations[i].title;
      //为每个位置创建标识
      var marker = new google.maps.Marker({
        map: map,
        position: position,
        title: title,

        animation: google.maps.Animation.DROP,
        id: i
      });
      //把marker放进markers数组里
      markers.push(marker);
      //添加事件使得点击时打开信息窗口
      marker.addListener('click',function(){
        populateInfoWindow(this, largeInfowindow);
      });
      //传入各标识位置扩展边界
      bounds.extend(markers[i].position);
    }

    map.fitBounds(bounds);
  }

  // 点击标识时弹出信息窗口。
  function populateInfoWindow(marker, infowindow) {
    // 检查信息窗口还没有在这个标识打开
    if (infowindow.marker != marker) {
      infowindow.marker = marker;
      infowindow.setContent('<div>' + marker.title + '</div>');
      infowindow.open(map, marker);
      // 确保信息窗口关闭时已清空marker属性值
      infowindow.addListener('closeclick',function(){
        infowindow.setMarker = null;
      });
    }
  }

function initMap() {
    map = new google.maps.Map(
        //省略同上
    });

    var locations = [
        //省略同上
    ];

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

    for (var i = 0; i < locations.length; i++) {
      var position = locations[i].location;
      var title = locations[i].title;
       var marker = new google.maps.Marker({
        //省略同上
      });
      markers.push(marker);
      marker.addListener('click', function() {
        populateInfoWindow(this, largeInfowindow);
      });
    }
    //不立即设置标识的地图参数和扩展地图界限，用showListings函数做
    document.getElementById('show-listings').addEventListener('click', showListings);
    document.getElementById('hide-listings').addEventListener('click', hideListings);
  }


  function populateInfoWindow(marker, infowindow) {
        //省略同上
  }

  // This function will loop through the markers array and display them all.
  function showListings() {
    var bounds = new google.maps.LatLngBounds();
    // Extend the boundaries of the map for each marker and display the marker
    for (var i = 0; i < markers.length; i++) {
      //将每个标识的地图设置为map
      markers[i].setMap(map);
      //扩展地图界限来容纳标识
      bounds.extend(markers[i].position);
    }
    map.fitBounds(bounds);
  }

  // This function will loop through the listings and hide them all.
  function hideListings() {
    for (var i = 0; i < markers.length; i++) {
      //不删除标识，只隐藏
      markers[i].setMap(null);
    }
  }

var map;
//加载地图
function initMap() {
  // Constructor creates a new map - only center and zoom are required.
  map = new google.maps.Map(document.getElementById('map'), {
    //中心 纬度 经度
    center: {lat: 30.317655, lng: 120.343745},
    //缩放值 越高越详细
    zoom: 13
  });
}