Question

我无法在Google地图上添加多个标记，有人可以看到下面的代码并提出建议。我的Google没有显示位置[]数组的标记。

<!DOCTYPE html>
<html>
 <head>
   <title>Geolocation</title>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

   <script>
var map;

function initialize() {
    var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     // Try HTML5 geolocation
     if(navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function(position) {
          initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          map.setCenter(initialLocation);
          var home = new google.maps.Marker({
            position: initialLocation, 
            map: map,
            icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
          });

          var myCity = new google.maps.Circle({
          center:initialLocation, map:map, radius:25000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2,
          fillColor:"#0000FF",
          fillOpacity:0.4,
          editable:true
          });
        }, function() {
          handleNoGeolocation(true);
        });
     } else {
       // Browser doesn't support Geolocation
       handleNoGeolocation(false);
     }
    }
    var locations = [
    ["New Mermaid",28.8909,76.5796,1,"Georgia Mason","","Norfolk Botanical Gardens, 6700 Azalea Garden Rd.","coming soon"],
    ["1950 Fish Dish",28.6800,76.9200,2,"Terry Cox-Joseph","Rowena's","758 W. 22nd Street in front of Rowena's", "found"],
    ];

    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0], locations[i][6]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

function handleNoGeolocation(errorFlag) {
 if (errorFlag) {
   var content = 'Error: The Geolocation service failed.';
 } else {
   var content = 'Error: Your browser doesn\'t support geolocation.';
 }

}
google.maps.event.addDomListener(window, 'load', initialize);

</script>  
 </head>
 <body>
   <div id="map-canvas"></div>
 </body>
</html>

Answer 1

添加标记并将地图初始化为有效的中心，然后尝试使用地理位置居中。

var map;

function initialize() {
    var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var locations = [
    ["New Mermaid",28.8909,76.5796,1,"Georgia Mason","","Norfolk Botanical Gardens, 6700 Azalea Garden Rd.","coming soon"],
    ["1950 Fish Dish",28.6800,76.9200,2,"Terry Cox-Joseph","Rowena's","758 W. 22nd Street in front of Rowena's", "found"],
    ];

    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    var bounds = new google.maps.LatLngBounds();
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
      });
      bounds.extend(marker.getPosition());

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0], locations[i][6]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    map.fitBounds(bounds);

working example

谷歌地图中有多个标记？

1 个答案: