画圆示例

此示例展示如何在地图区绘制圆对象。

关键代码

    for (var city in areamap) {
      //绘制圆形
      var populationOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map,
        center: areamap[city].center,
        radius: areamap[city].population / 20000
      };
      cityCircle = new sogou.maps.Circle(populationOptions);
    }

代码解析

设置将要绘制的三个圆的圆心坐标和半径。

  var areamap = {};
  areamap['wudaokou'] = {
    center: new sogou.maps.LatLng(39.992792,116.326142),
    population: 2842518
  };
  areamap['baofusi'] = {
    center: new sogou.maps.Point(12949589,4835996),
    population: 8143197
  };
  areamap['zhongguancun'] = {
    center: new sogou.maps.LatLng(39.986017,116.31049),
    population: 3844829
  }

设置圆形参数并绘制圆形。

    for (var city in areamap) {
      //绘制圆形
      var populationOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map,
        center: areamap[city].center,
        radius: areamap[city].population / 20000
      };
      cityCircle = new sogou.maps.Circle(populationOptions);
    }

完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>搜狗地图 JavaScript API 示例: 画圆示例</title>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script type="text/javascript" src="//api.go2map.com/maps/js/api_v2.5.1.js"></script>


<script type="text/javascript">

  //创建3个地区范围的圆圈,半径为人口数量示意
  //圆心的坐标,可以是经纬度坐标,也可以是搜狗坐标
  var areamap = {};
  areamap['wudaokou'] = {
    center: new sogou.maps.LatLng(39.992792,116.326142),
    population: 2842518
  };
  areamap['baofusi'] = {
    center: new sogou.maps.Point(12949589,4835996),
    population: 8143197
  };
  areamap['zhongguancun'] = {
    center: new sogou.maps.LatLng(39.986017,116.31049),
    population: 3844829
  }
  var cityCircle;

  function initialize() {
    var mapOptions = {
      zoom: 15,
      center: new sogou.maps.LatLng(39.988176,116.319404),
      mapTypeId: sogou.maps.MapTypeId.TERRAIN
    };

    var map = new sogou.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

    for (var city in areamap) {
      //绘制圆形
      var populationOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map,
        center: areamap[city].center,
        radius: areamap[city].population / 20000
      };
      cityCircle = new sogou.maps.Circle(populationOptions);
    }
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

运行代码