Google Maps API获取地图比例控制值

Question

使用可视化HeatMap时......

如果渲染的地图在标尺刻度中显示20 miles |_____|，是否有一个函数将返回值20？

如何确定那里显示的是哪个号码？

Answer 1

您可以创建自己的自定义缩放控件。该脚本有3个参数：

• 缩放控件的最小宽度
• 缩放控件的最大宽度
• 要使用的比例值数组

代码被注释，因此它应该是自我解释的。全屏查看代码段或向下滚动并放大/缩小以查看其实际效果。

var map;
var minScaleWidth = 50; // Minimum width of the scale in px
var maxScaleWidth = 80; // Maximum width of the scale in px

// Scale values in meters and display values
var scaleValues = [{
    val: 2,
    dspVal: '2 m'
  }, {
    val: 5,
    dspVal: '5 m'
  },
  {
    val: 10,
    dspVal: '10 m'
  },
  {
    val: 20,
    dspVal: '20 m'
  },
  {
    val: 50,
    dspVal: '50 m'
  },
  {
    val: 100,
    dspVal: '100 m'
  },
  {
    val: 200,
    dspVal: '200 m'
  },
  {
    val: 500,
    dspVal: '500 m'
  },
  {
    val: 1000,
    dspVal: '1 km'
  },
  {
    val: 2000,
    dspVal: '2 km'
  },
  {
    val: 5000,
    dspVal: '5 km'
  },
  {
    val: 10000,
    dspVal: '10 km'
  },
  {
    val: 20000,
    dspVal: '20 km'
  },
  {
    val: 50000,
    dspVal: '50 km'
  },
  {
    val: 100000,
    dspVal: '100 km'
  },
  {
    val: 200000,
    dspVal: '200 km'
  },
  {
    val: 500000,
    dspVal: '500 km'
  },
  {
    val: 1000000,
    dspVal: '1000 km'
  },
  {
    val: 2000000,
    dspVal: '2000 km'
  },
  {
    val: 5000000,
    dspVal: '5000 km'
  }
];

function initialize() {

  var myLatLng = new google.maps.LatLng(46.8, 6.19);
  var mapOptions = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  google.maps.event.addListener(map, 'idle', makeScale);
}

function makeScale() {

  let zoom = map.getZoom();

  // Calculate the width of 1 map pixel in meters
  // Based on latitude and zoom level
  // See https://groups.google.com/d/msg/google-maps-js-api-v3/hDRO4oHVSeM/osOYQYXg2oUJ
  let scale = 156543.03392 * Math.cos(map.getCenter().lat() * Math.PI / 180) / Math.pow(2, zoom);

  let minScale = Math.floor(scale * minScaleWidth);
  let maxScale = Math.ceil(scale * maxScaleWidth);

  // Loop through scale values
  for (var i = 0; i < scaleValues.length; i++) {

    if (i !== scaleValues.length - 1) {

      // Select appropriate scale value
      if (((minScale <= scaleValues[i].val) && (scaleValues[i].val <= maxScale)) || ((minScale > scaleValues[i].val) && (maxScale) < scaleValues[i + 1].val)) {

        // Found appropriate scale value
        // Set scale width and value
        setScaleValues(scale, scaleValues[i]);

        // Break for loop
        break;
      }

    } else {

      // Reached the end of the values array
      // Found no match so far
      // Use array last value anyway

      // Set scale width and value
      setScaleValues(scale, scaleValues[i]);
    }
  }
}

function setScaleValues(scale, values) {

  // Calculate real scale width in px
  let scaleWidth = values.val / scale;

  // Set scale HTML elements width and display value
  document.getElementById('scale-bar').style.width = scaleWidth + 'px';
  document.getElementById('scale-value').innerHTML = values.dspVal;
}

initialize();

body {
  font-family: Arial, sans-serif;
  font-size: 10px;
  color: #444;
}

#map-canvas {
  height: 200px;
}

#scale {
  background-color: yellow;
  padding: 20px;
}

#scale-value {
  display: inline-block;
  margin-right: 1px;
}

#scale-bar {
  border-color: #444;
  border-width: 0 2px 2px 2px;
  border-style: solid;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: 6px;
  width: 100px;
  display: inline-block;
}

<div id="map-canvas"></div>

<div id="scale">
  <div id="scale-value">

  </div>
  <div id="scale-bar">

  </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

http://jsfiddle.net/upsidown/3jnxk71o/