Question

我正在创建一个单页网站，我想在“联系人”部分后面添加地图，设置为背景，使其浮动，在可拖动后面的地图或在后面设置的任何内容都可以接受。另外，我使用google map api和leafletjs时遇到了问题，所以我更喜欢使用其中任何一个，我接受任何建议。

给定坐标14.2973°N，121.0392°E和下面的截面接触：

<!-- start contact -->
<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2 class="wow bounceIn" data-wow-offset="50" data-wow-delay="0.3s">CONTACT <span>US</span></h2>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-offset="50" data-wow-delay="0.9s">
                <form action="#" method="post">
                    <label>NAME</label>
                    <input name="fullname" type="text" class="form-control" id="fullname">

                    <label>EMAIL</label>
                    <input name="email" type="email" class="form-control" id="email">

                    <label>MESSAGE</label>
                    <textarea name="message" rows="4" class="form-control" id="message"></textarea>

                    <input type="submit" class="form-control">
                </form>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 wow fadeInRight" data-wow-offset="50" data-wow-delay="0.6s">
                <address>
                                <p class="address-title">OUR ADDRESS</p>
                                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molestie.</span>
                                <p><i class="fa fa-phone"></i> 090-020-0340</p>
                                <p><i class="fa fa-envelope-o"></i> aice09@company.com</p>
                                <p><i class="fa fa-map-marker"></i> Carmona, Cavite, Philippines</p>
                            </address>
                <ul class="social-icon">
                    <li>
                        <h4>WE ARE SOCIAL</h4>
                    </li>
                    <li>
                        <ahref="javascript:;" onclick="window.location.href = '#'" class="fa fa-facebook">
                            </a>
                    </li>
                    <li>
                        <ahref="javascript:;" onclick="window.location.href = '#'" class="fa fa-twitter">
                            </a>
                    </li>
                    <li>
                        <ahref="javascript:;" onclick="window.location.href = '#'" class="fa fa-instagram">
                            </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- end contact -->

Answer 1

这是您的问题的代码。

HTML：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script type="text/javascript">
  var map = L.map('googlemaps').setView([14.2973, 121.0392], 16);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([14.2973, 121.0392]).addTo(map)
    .bindPopup('<b>ANONYMOUS PHIL</b> <br> Lot 3-5, Carmona, Cavite, Philippines <br> (02) 851 7601 <br>  anonymousphil@gmail.com')
    .openPopup();
</script>

LEAFLETJS

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

// The latitude and longitude of your business / place
var position = [14.2973, 121.0392];

function showGoogleMaps() {

    var latLng = new google.maps.LatLng(position[0], position[1]);

    var mapOptions = {
        zoom: 16, // initialize zoom level - the max value is 21
        streetViewControl: false, // hide the yellow Street View pegman
        scaleControl: true, // allow users to zoom the Google Map
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latLng
    };

    map = new google.maps.Map(document.getElementById('googlemaps'),
        mapOptions);

    // Show the default red marker at the location
    marker = new google.maps.Marker({
        position: latLng,
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP
    });
}

google.maps.event.addDomListener(window, 'load', showGoogleMaps);
</script>

GOOGLE MAP：

<style type="text/css">
  #googlemaps { 
  height: 100%; 
  width: 100%; 
  position:absolute; 
  top: 0; 
  left: 0; 
  z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */
}

#contactform { 
  position: relative; 
  z-index: 1; /* The z-index should be higher than Google Maps */
  width: 500px;
  margin: 60px auto 0;
  padding: 10px;
  background: black;
  height: auto;
  opacity: .45; /* Set the opacity for a slightly transparent Google Form */ 
  color: white;
}
</style>

风格

baseUrl

地图（leafletjs或谷歌地图）在后面或作为背景

1 个答案: