Question

我试图在网站上使用谷歌嵌入式iframe问题是我想把它放在右侧我使用谷歌谷歌但我似乎无法将它放到正确的位置请将它放在中心。我整天都在弄清楚这个问题我在追加iframe上使用了＆amp; wloc = true。这些是我的代码。我的jsfiddle。请指教。

这是我尝试使用地理编码。但问题是它总是居中，我想把它放在右上方，因为我想用左侧覆盖一些具有不透明效果的div。从默认嵌入，标语牌（气泡）将只发布在左上角。如果我可以将它们重新定位在右上方，我会不希望它继续下去。我也在API上使用脚本。我试图改变它的css但它不会让它我覆盖它。

＆＃13;

#map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>

  </head>
  <body>
    <div id="map"></div>
    <script>

      // This example displays a marker at the center of Australia.
      // When the user clicks the marker, an info window opens.
	/*
	geocoder = new google.maps.Geocoder();
        var address = 'Level 1, 416 Mt Alexander Road, Ascot Vale VIC 3032';

        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map = new google.maps.Map(document.getElementById('map'), {
                    mapTypeId: google.maps.MapTypeId.SATELLITE,
                    zoom: 9
                });

                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                var request = {
                    location: results[0].geometry.location,
                   // radius: 50000,
                  // name: 'ski',
                    //keyword: 'mountain',
                  type: ['ROADMAP']
                };
                infowindow = new google.maps.InfoWindow();
                var service = new google.maps.places.PlacesService(map);
                service.nearbySearch(request, callback);
            }
            else {
                //alert("Geocode was not successful for the following reason: " + status);
            }
        });
        return false;
		*/
      function initMap() {
	  
	    
		
		
        var uluru = {lat: -25.363 , lng: 131.044};
        var uluru = {lat: -27.4649562 , lng: 153.0261663};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
        center: uluru
		
        });

        var contentString = '<div id="content" >'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
            '<div id="bodyContent">'+
            '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
            'sandstone rock formation in the southern part of the '+
            'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
            'south west of the nearest large town, Alice Springs; 450&#160;km '+
            '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
            'features of the Uluru - Kata Tjuta National Park. Uluru is '+
            'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
            'Aboriginal people of the area. It has many springs, waterholes, '+
            'rock caves and ancient paintings. Uluru is listed as a World '+
            'Heritage Site.</p>'+
            '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
            'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
            '(last visited June 22, 2009).</p>'+
            '</div>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
		
		google.maps.event.addListener(marker, 'click', function() {
		   infowindow.open(map,marker);
		});

		infowindow.open(map,marker);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQBbeAhgxa9nSQAdEFXJuLmNLFyANHdSo &callback=initMap">
    </script>
  </body>
</html>

＆＃13;

Answer 1

您可以在右上角添加一个div作为control，在点击标记时填充适合标记的内容（或在地图加载时将其放在那里）。

    marker.addListener('click', function() {
      document.getElementById('infowindow').innerHTML = contentString;
      document.getElementById('infowindow').style.display = "block";
    });
    // Create a div to hold the control.
    var controlDiv = document.createElement('div');

    // Set CSS for the control border
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#fff';
    controlUI.style.border = '2px solid #fff';
    controlUI.style.cursor = 'pointer';
    controlUI.style.marginBottom = '22px';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to recenter the map';
    controlDiv.appendChild(controlUI);
    controlUI.appendChild(document.getElementById('infowindow'));
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

proof of concept fiddle

＆＃13;

function initMap() {
  var uluru = {
    lat: -27.4649562,
    lng: 153.0261663
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: uluru,
    fullscreenControl: false

  });

  var contentString = '<div id="content" >' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the ' +
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
    'south west of the nearest large town, Alice Springs; 450&#160;km ' +
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
    'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
    'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
    'Aboriginal people of the area. It has many springs, waterholes, ' +
    'rock caves and ancient paintings. Uluru is listed as a World ' +
    'Heritage Site.</p>' +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
    '(last visited June 22, 2009).</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    document.getElementById('infowindow').innerHTML = contentString;
    document.getElementById('infowindow').style.display = "block";
  });
  google.maps.event.trigger(marker, 'click');
  // Create a div to hold the control.
  var controlDiv = document.createElement('div');

  // Set CSS for the control border
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);
  controlUI.appendChild(document.getElementById('infowindow'));
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
}

＆＃13;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#infowindow {
  height: 100px;
  width: 300px;
  overflow: auto;
  display: none;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Info windows</title>
</head>

<body>
  <div id="map"></div>
  <div id="infowindow"></div>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQBbeAhgxa9nSQAdEFXJuLmNLFyANHdSo &callback=initMap">
  </script>
</body>

</html>

＆＃13;

谷歌地图的地方卡重新定位

1 个答案: