带有jquery和bootstrap的谷歌地图api [重复]答案

【问题标题】：google map api with jquery and bootstrap [duplicate]带有jquery和bootstrap的谷歌地图api [重复]
【发布时间】：2016-03-03 18:23:32
【问题描述】：

我想在我的地图中标记多个地点。我在另一个主题中找到了我的一部分代码。但是那个代码随机标记了一些地方。我想标记特定的地方。我怎样才能做到这一点？这就是我现在所拥有的。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                // map options
                var options = {
                    zoom: 5,
                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    mapTypeControl: false
                };

                // init map
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);

                // NY and CA sample Lat / Lng
                var southWest = new google.maps.LatLng(40.744656, -74.005966);
                var northEast = new google.maps.LatLng(34.052234, -118.243685);
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();

                // set multiple marker
                for (var i = 0; i < 250; i++) {
                    // init markers
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                        map: map,
                        title: 'Click Me ' + i
                    });

                    // process multiple info windows
                    (function(marker, i) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: 'Hello, World!!'
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, i);
                }
            })();
        });
        </script>
</head>
<body>

<div class="col-sm-12">
<div id="map_canvas" style="width:100%; height:500px;"></div>
</div>

</body>
</html>

【问题讨论】：

var marker = new google.maps.Marker({ position: new google.maps.LatLng(float1,float2), //floating value like123.45 map: map, title: 'whatever ' });
@aishwatsingh 那么 for 循环呢？

标签： jquery google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

更改此代码：

position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()).

这会将标记设置在随机位置。改成：

position: new google.maps.LatLng(yourLat, yourLon).

并且for 循环不应该从 1 循环到 250。您只需循环需要添加标记的位置数。

【讨论】：