Question

好吧它会在底部显示信息，但我想使用innerHTML之外的其他内容我在下面尝试此代码，但它显示的信息非常奇怪

document.getElementById('myinfo').firstChild.nodeValue = content;

任何人都有任何其他建议。

＆＃13;

//this code writes the map
function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 39.790117,
      lng: -96.584307
    },
    zoom: 4,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  //this code is for the search box
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input, null);
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();
    var bounds = new google.maps.LatLngBounds();
    for (i = 0; place = places[i]; i++) {
      console.log('testing');
      bounds.extend(place.geometry.location);
    }
    map.fitBounds(bounds);
    map.setZoom(12);
  });

  //this is the data of the golf courses
  var locations = [];

  locations.push({
    name: "Pelican Hill Golf Club",
    address: "22800 S Pelican Hill Rd, Newport Beach, CA 92657",
    url: "golfpelicanhill.com",
    phone: "(866) 921-3139",
    latlng: new google.maps.LatLng(33.587368, -117.843351)
  });

  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: locations[i].latlng,
      map: map,
      title: locations[i].name
    });
    var location = locations[i];
    var infoWindow = new google.maps.InfoWindow();
    var content = '<strong class="lead" style="color:#000;">' + location.name + '</strong> - (<a target="_blank" href="' + location.url + '">url</a>)<hr style="margin:0;"><p style="margin-bottom:0;">' + location.address + '<br>' + location.city + ', ' + location.state + ' ' + location.zip + '<br>' + location.phone + '</p>';
    google.maps.event.addListener(marker, 'click', (function(marker, content) {
      return function() {
        document.getElementById('myinfo').innerHTML = content;
      }
    })(marker, content));
  }
}

＆＃13;

#map {
  margin-top: 50px;
  width: 65%;
  height: 50%;
}
input {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  width: 300px;
}
#pac-input:focus {
  border-color: #4d90fe;
}
.pac-container {
  font-family: Roboto;
}
#type-selector {
  color: #fff;
  background-color: #4d90fe;
  padding: 5px 11px 0px 11px;
}
#type-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}
#target {
  width: 345px;
}
body {
  width: 100%;
  height: 100%;
}
html {
  width: 100%;
  height: 100%;
}
.intro-section {
  height: 100%;
  width: 100%;
  padding-top: 25px;
  text-align: center;
}
.container {
  opacity: 0.8;
  background-color: rgba(0, 0, 0, 0.9);
  background-attachment: fixed;
  background-size: cover, contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("http://bunkerhillgolf.com/wp-content/uploads/2013/12/Bunker-Hill-Green.jpg");
}
#myinfo {
  background-color: #fff;
  width: 65%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>golf page</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>

<body id="page-top">
  <div class="container intro-section">
    <div id="aboutgolf">
    </div>
    <div class="col-md-4 col-md-offset-4">
      <input id="pac-input" class="controls" type="text" placeholder="Zip or State" />
    </div>
    <div class="col-md-4 col-md-offset-2" id="map">
    </div>
    <div class="col-md-4 col-md-offset-3" id="myinfo">
    </div>
  </div>
  <script <script src="js/main.js" type="text/javascript"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASFbqtYQwVGZsZKvGVTYkE0i5Xk5mDN0E&libraries=places&callback=initAutocomplete" async defer></script>
</body>

</html>

＆＃13;

我需要使用innerHTML以外的东西！任何想法我试图附加到孩子，但没有像我想的那样工作

0 个答案: