我们可以使用谷歌地图API将一些数据放在谷歌地图上绘制的圆圈内

Question

我正在使用谷歌地图API中的示例来绘制圆圈，并希望将人口值放置在圆圈内，以便我们可以在谷歌地图API中执行此操作

实施例：https://developers.google.com/maps/documentation/javascript/examples/circle-simple

如图所示，在ping圈内，想要放置人口的值

Answer 1

一种选择是使用InfoBox第三方库标记圈子。

Proof of concept fiddle

代码段

＆＃13;

＆＃13;

// This example creates circles on the map, representing populations in North
// America.

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: 37.090,
      lng: -95.712
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      zIndex: -100,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
    var myOptions = {
      content: "population<br>" + citymap[city].population,
      boxStyle: {
        background: '#FFFFFF',
        color: '#000000',
        textAlign: "center",
        fontSize: "8pt",
        width: "50px"
      },
      disableAutoPan: true,
      pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
      position: new google.maps.LatLng(citymap[city].center.lat,
        citymap[city].center.lng),
      closeBoxURL: "",
      isHidden: false,
      pane: "floatPane",
      zIndex: 100,
      enableEventPropagation: true
    };
    var ib = new InfoBox(myOptions);

    ib.open(map);

  }
}

google.maps.event.addDomListener(window, "load", initMap);

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {
      lat: 41.878,
      lng: -87.629
    },
    population: 2714856
  },
  newyork: {
    center: {
      lat: 40.714,
      lng: -74.005
    },
    population: 8405837
  },
  losangeles: {
    center: {
      lat: 34.052,
      lng: -118.243
    },
    population: 3857799
  },
  vancouver: {
    center: {
      lat: 49.25,
      lng: -123.1
    },
    population: 603502
  }
};

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map"></div>

＆＃13;

＆＃13;

＆＃13;