我们可以使用Google Map API在Google地图上绘制的圆内放置一些数据吗 [英] can we place some data inside the circle drawn on the google map using google map api

问题描述

我正在使用google map API中的示例来绘制圆，并希望将总体值放置在圆内以进行绘图，我们可以在google map API中做到这一点

I am using the sample from google map API to draw the circle and wanted to place the population value inside the circle for the plots can we do this in google map API

示例: https://developers.google.com/maps/说明文件/javascript/examples/圆形简单

如演示中所示在ping圈内，想要放置人口值

inside the ping circle as shown in the demo ,want to place the value of the population

推荐答案

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

One option is to use the InfoBox third party library to label the circles.

概念证明小提琴

代码段:

// 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
  }
};

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

<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>

这篇关于我们可以使用Google Map API在Google地图上绘制的圆内放置一些数据吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！