javascript - 谷歌地图 "noClear"不工作

Question

我正在构建的网站上有一张 map ，我正在尝试叠加一个部分以向显示的位置添加更多详细信息。目前，在加载时，它会在覆盖元素永久消失之前闪烁它们。有人告诉我可以将它们分开并使用“position:absolute”，但我宁愿将所有内容放在一起。

我在互联网上四处查看，但关于“noClear”的信息往往很少见。

编辑:将尝试让它再次在 JSFiddle 中运行，当我在问这个问题之前尝试时是一场灾难。

编辑:出于某种原因，我无法让它与我的代码一起正常工作，但我已经使用类似的代码复制了错误。 http://jsfiddle.net/103romm2/

谷歌地图Javascript

<script>
        function initialize() {
            var myLatlng = new google.maps.LatLng(51.400140, -3.288225);
            var mapCanvas = document.getElementById('map_canvas');
            var mapOptions = {
                scrollwheel: false,
                navigationControl: false,
                mapTypeControl: false,
                scaleControl: false,
                disableDefaultUI: true,
                center: myLatlng,
                zoom: 17,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                noClear: true
            }
            var map = new google.maps.Map(mapCanvas, mapOptions)
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

HTML

<div id = "map_canvas" class = "hidden-phone">
        <div id = "overlay-map">
            <h1 style = "float: left; font-weight: bold"> Contact us </h1>
            <div class = "col-md-6 col-md-offset-6">         
                <h3>Where we are</h3>
                <br>
                <div class="row-fluid">
                    <div class="col-md-12">
                        <div class="address-container">
                            <img src="img/glyphicons_060_compass.png" />
                        </div>
                        <address class="address-container">
                            <div class="street-address" style="font-weight: bold;"> 124 Park Crescent </div>
                            <div class="city-name">Barry CF62 6HE</div>
                            <div class="country-name">United Kingdom</div>
                        </address>
                        </div>
                        <div class="col-md-12">
                            <div class="address-container">
                                <div>
                                    <img alt="" src="img/glyphicons_442_earphone.png" />
                                </div>
                                <a href="">+44 (0) 1446 421300</a>
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
    </div>

Answer 1

一个简单的解决方案是添加一个 custom control :

此外，您的代码中还有一个/DIV 元素。如果您单击此示例，您的 map 将转到芝加哥。

<script>

var map
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The HomeControl adds a control to the map that simply
 * returns the user to Chicago. This constructor takes
 * the control DIV as an argument.
 */

function HomeControl(controlDiv, map) {

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map.
  controlDiv.style.padding = '5px';

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<div><h3>Where we are</h3></div>';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(chicago)
  });
}

        function initialize() {
            var myLatlng = new google.maps.LatLng(51.400140, -3.288225);
            var mapCanvas = document.getElementById('map-canvas');
            var mapOptions = {
                scrollwheel: false,
                navigationControl: false,
                mapTypeControl: false,
                scaleControl: false,
                disableDefaultUI: true,
                center: myLatlng,
                zoom: 17,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                noClear: true
            }

           var map = new google.maps.Map(mapCanvas, mapOptions)

            // Create the DIV to hold the control and call the HomeControl() constructor
          // passing in this DIV.
          var homeControlDiv = document.createElement('div');
          var homeControl = new HomeControl(homeControlDiv, map);

          homeControlDiv.index = 1;
          map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);

    </script>