Question

使用此代码，我怎样才能使多个聚光灯不仅仅有一个。

Answer 1

var p = new google.maps.Polygon({
    paths: [drawCircle(getPosition(), 100, 1),
    drawCircle(getPosition(), .02, -1), 
    drawCircle(new google.maps.LatLng(45.345573,-71.09909500000003),
    10, -1)],
    strokeColor: "#040102",
    map: map
});

这是我的完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
</style>
<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
// This example creates circles on the map, representing
// populations in North America.

// First, create an object containing LatLng and population for each city.

var citymap = {};
citymap['spot1'] = {
  center: new google.maps.LatLng(36.6293998, 127.4324792),
  population: 8143197

};
citymap['spot2'] = {
          center: new google.maps.LatLng(36.6295817, 127.4352562),
          population: 2714856
};
citymap['spot3'] = {
          center: new google.maps.LatLng(36.6297109, 127.4306877),
          population: 271
};
citymap['spot4'] = {
          center: new google.maps.LatLng(36.6288666, 127.4330287),
          population: 271
};
citymap['spot5'] = {
          center: new google.maps.LatLng(36.6297109, 127.4330287),
          population: 271
};


var cityCircle;
var bounds = new google.maps.LatLngBounds();

var areas=new Array();


function drawCircle(point, radius, dir) { 
  var d2r = Math.PI / 180;   // degrees to radians 
  var r2d = 180 / Math.PI;   // radians to degrees 
  var earthsradius = 6378.1; // 3963 is the radius of the earth in miles
  var points = 32; 


  // find the raidus in lat/lon 
  var rlat = (radius / earthsradius) * r2d; 
  var rlng = rlat / Math.cos(point.lat() * d2r); 

  var extp = new Array(); 
  if (dir==1)   {var start=0;var end=points+1} // one extra here makes sure we connect the ends
  else      {var start=points+1;var end=0}

  for (var i=start; (dir==1 ? i < end : i > end); i=i+dir) { 
       var theta = Math.PI * (i / (points/2)); 
       ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
       ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
       extp.push(new google.maps.LatLng(ex, ey)); 
       bounds.extend(extp[extp.length-1]);
        } 




  return extp;
}


function initialize() {
  // Create the map.

  var map;
  var inforWindow;
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(36.6293998, 127.4324792),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),

      mapOptions);

  var outerbounds = [ // covers the (mercator projection) world
        new google.maps.LatLng(85,180),
    new google.maps.LatLng(85,90),
    new google.maps.LatLng(85,0),
    new google.maps.LatLng(85,-90),
    new google.maps.LatLng(85,-180),
    new google.maps.LatLng(0,-180),
    new google.maps.LatLng(-85,-180),
    new google.maps.LatLng(-85,-90),
    new google.maps.LatLng(-85,0),
    new google.maps.LatLng(-85,90),
    new google.maps.LatLng(-85,180),
    new google.maps.LatLng(0,180),
    new google.maps.LatLng(85,180)];

  var populationOptions = {
          strokeColor: '#000000',
          strokeOpacity: 0.0,
          strokeWeight: 3,
          fillColor: '#000000',
          fillOpacity: 0.7,
          map: map,
          paths: [outerbounds,drawCircle(citymap['spot1'].center,0.02,-1),drawCircle(citymap['spot2'].center,0.02,-1),drawCircle(citymap['spot3'].center,0.02,-1),drawCircle(citymap['spot4'].center,0.02,-1),drawCircle(citymap['spot5'].center,0.02,-1)]
        };
  cityCircle = new google.maps.Polygon(populationOptions);
    map.fitBounds(bounds); 
}

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

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

如何在谷歌地图上给出多个聚光灯效果

1 个答案: