javascript - 带有照片和其他详细信息的 map 位置详细信息

我正在尝试加载一张包含位置详细信息的地图，例如照片，地址，时间，电话。

我已经尝试过一个示例，但是我必须单击搜索框以显示地图。

我想加载地图而不单击搜索框。

帮助解决这个问题。应该在地图上向地图加载一个位置及其照片。

这是源代码的链接：Example for Map with image

这是一个示例代码：

var markers = [];

  function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      maxZoom: 16,
      styles: [
        {
          elementType: 'labels',
          stylers: [ { visibility: 'on' } ]
        },
        {
          stylers: [ { saturation: -100 }, { lightness: -20 } ]
        }
      ]
    });



    var input = document.getElementById('target');
    var searchBox = new google.maps.places.SearchBox(input);
    searchBox.setBounds(map.getBounds());

    var modalWindow = new ModalWindow(map);


    google.maps.event.addListener(searchBox, 'places_changed', function() {

      var places = searchBox.getPlaces();
      if (!places.length) {
        return;
      }

      for (var i = 0, marker; marker = markers[i]; i++) {
        marker.setMap(null);
      }
      markers = [];

      var bounds = new google.maps.LatLngBounds();

      $("#side_bar").empty();
      for (var i = 0, place; place = places[i]; i++) {
        if (place.photos) {
          markers.push(new PhotoMarker(place, map, modalWindow));
          setLink(i);
        bounds.extend(place.geometry.location);
        } else {
          markers.push(new google.maps.Marker({
            position: place.geometry.location,
            map: map,
            icon: new google.maps.MarkerImage(
                'http://carsedia.com/code/voyage/icons/7.png',
                null, null, new google.maps.Point(3.5,3.5)),
            clickable: false


          }));
        }
      }
      function setLink(i) {
      var photo = place.photos[0].getUrl({ 'maxWidth': 50, 'maxHeight': 50 });
        var sideClick = jQuery("<a class=side_click href='#'></a>");
        $(sideClick).html(place.name+place.opening_hours);
        $("#side_bar").append(sideClick).append("<br>").append("<div class='draggable'><img src="+photo+" style='width:50px'></img></div><br><p></p>");
         $(sideClick).on("click", function() {
           markers[i].modalWindow_.getDetails(markers[i].place_);
         });
      }

      map.fitBounds(bounds);
    });


    google.maps.event.addListener(map, 'bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

    google.maps.event.addDomListenerOnce(searchBox, 'places_changed');
  }

  /* Photo Marker */
  function PhotoMarker(place, map, modalWindow) {
    this.modalWindow_ = modalWindow;
    this.place_ = place;
    this.setMap(map);
  }

  PhotoMarker.prototype = new google.maps.OverlayView();

  PhotoMarker.prototype.onAdd = function() {
    this.img_ = document.createElement('img');
    this.img_.className = 'photo-marker';
    this.img_.title = this.place_.name;
    this.img_.src = this.place_.photos[0].getUrl({
        'maxWidth': 100,
        'maxHeight': 100
    });
    this.getPanes().overlayImage.appendChild(this.img_);

    var that = this;
    google.maps.event.addDomListener(this.img_, 'click', function() {
      that.modalWindow_.getDetails(that.place_);
    });
  };

  PhotoMarker.prototype.draw = function() {
    var that = this;
    if (!this.img_ || (this.img_ && !this.img_.complete)) {
      window.clearTimeout(this.imgLoader_);
      this.imgLoader_ = window.setTimeout(function() {
          that.draw();
      }, 50);
      return;
    }
    var proj = this.getProjection();
    var pos = proj.fromLatLngToDivPixel(this.place_.geometry.location);
    var w = this.img_.offsetWidth;
    var h = this.img_.offsetHeight;
    this.img_.style.left = Math.floor(pos.x - w / 2) + 'px';
    this.img_.style.top = Math.floor(pos.y - h / 2) + 'px';
  };

  PhotoMarker.prototype.onRemove = function() {
    this.img_.parentNode.removeChild(this.img_);
    this.img_ = null;
  };

  /* Modal Window */
  function ModalWindow(map) {
    this.service_ = new google.maps.places.PlacesService(map);
    this.createDOMElements_();
    this.addEventListeners_();
  }

  ModalWindow.prototype.createDOMElements_ = function() {
    this.modal_ = document.createElement('div');
    this.modal_.id = 'modal';
    document.body.appendChild(this.modal_);

    var modalWindow = document.createElement('div');
    modalWindow.id = 'window';
    this.modal_.appendChild(modalWindow);

    var close = document.createElement('img');
    close.id = 'close';
    close.className = 'close';
    close.src = '../images/close.png';
    close.alt = 'Close window';
    modalWindow.appendChild(close);

    this.info_ = document.createElement('div');
    this.info_.id = 'info';
    modalWindow.appendChild(this.info_);

    this.photo_ = document.createElement('div');
    this.photo_.id = 'photo';
    modalWindow.appendChild(this.photo_);

    this.photos_ = document.createElement('div');
    this.photos_.id = 'photos';
    modalWindow.appendChild(this.photos_);

    this.attribution_ = document.createElement('div');
    this.attribution_.id = 'attribution';
    modalWindow.appendChild(this.attribution_);

    var mask = document.createElement('div');
    mask.id = 'mask';
    this.modal_.appendChild(mask);
  };

  ModalWindow.prototype.addEventListeners_ = function() {
    var that = this;

    google.maps.event.addDomListener(this.modal_, 'click', function(e) {
      if (e.target && (e.target.id == 'close' || e.target.id == 'mask')) {
        that.hideWindow_();
      }
    });

    google.maps.event.addDomListener(document, 'keyup', function(e) {
      // Esc key
      if (e.keyCode == 27) {
        that.hideWindow_();
      }
    });
  };

  ModalWindow.prototype.getDetails = function(place) {
    if (this.place_ && place.id == this.place_.id) {
      this.showWindow_();
      return;
    }

    var that = this;
    this.service_.getDetails({'reference': place.reference},
        function(details, status) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
        return;
      }
      that.place_ = place;
      that.details_ = details;
      that.createContent_();
      that.showWindow_();
    });
  };

  ModalWindow.prototype.createContent_ = function(place, status) {
    this.createInfo_();
    this.createPhoto_(this.place_.photos[0]);
    this.createThumbnails_();
    this.createAttribution_(this.place_.photos[0]);
  };

  ModalWindow.prototype.createPhoto_ = function(photo) {
    this.photo_.innerHTML = '';

    var img = document.createElement('img');
    img.src = photo.getUrl({'maxWidth': 480, 'maxHeight': 246});
    this.photo_.appendChild(img);
  };

  ModalWindow.prototype.createInfo_ = function() {
    this.info_.innerHTML = '';

    var name = document.createElement('h3');
    name.innerHTML = this.place_.name;
    this.info_.appendChild(name);

    var address = document.createElement('p');
    address.innerHTML = this.place_.formatted_address;
    this.info_.appendChild(address);
  };

  ModalWindow.prototype.createThumbnails_ = function() {
    this.photos_.innerHTML = '';

    for (var i = 0; i < this.details_.photos.length; i++) {
      var thumbnail = document.createElement('img');
      thumbnail.id = i;
      thumbnail.src = this.details_.photos[i].getUrl({'maxWidth': 88,
          'maxHeight': 88});
      this.photos_.appendChild(thumbnail);
    }

    this.photos_.firstChild.className = 'selected';
    this.selected_ = this.photos_.firstChild;

    var that = this;
    google.maps.event.addDomListener(this.photos_, 'click', function(e) {
      if (e.target && e.target.nodeName == 'IMG' &&
          e.target.className != 'selected') {
        that.changeSelected_(e.target);
      }
    });
  };

  ModalWindow.prototype.changeSelected_ = function(thumbnail) {
    this.selected_.className = '';
    thumbnail.className = 'selected';
    this.selected_ = thumbnail;

    this.createPhoto_(this.details_.photos[thumbnail.id]);
    this.createAttribution_(this.details_.photos[thumbnail.id]);
  };

  ModalWindow.prototype.createAttribution_ = function(photo) {
    this.attribution_.innerHTML = '';

    if (photo.html_attributions.length) {
      this.attribution_.innerHTML = photo.html_attributions[0];
      var link = this.attribution_.getElementsByTagName('a');
      if (link[0]) {
        link[0].target = '_blank';
      }
    }
  };

  ModalWindow.prototype.showWindow_ = function() {
    this.modal_.style.display = 'block';
  };

  ModalWindow.prototype.hideWindow_ = function() {
    this.modal_.style.display = 'none';
  };




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

最佳答案

试试这个JavaScript，这将解决您的问题

var service = new google.maps.places.PlacesService(map);
    service.getDetails({
    location: myLatlng,
placeId: 'ChIJG6NP4gBx5kcRWABOirX4xkc'
 },abc);

 function abc(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {

  bounds = new google.maps.LatLngBounds();
  markers=[];
   if (place.photos) {
   console.log(place.photos[0]);
         markers.push(new PhotoMarker(place, map, modalWindow));
         // setLink(i);
        bounds.extend(place.geometry.location);
        } else {
          markers.push(new google.maps.Marker({
            position: place.geometry.location,
            map: map,
            icon: new google.maps.MarkerImage(
                'http://carsedia.com/code/voyage/icons/7.png',
                null, null, new google.maps.Point(3.5,3.5)),
            clickable: false


          }));
        }
   }
}

完整的代码可以在这里找到CODE

关于javascript - 带有照片和其他详细信息的 map 位置详细信息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36325061/