javascript - 谷歌地图 V3 : Hexagon grid - Error with setWindow

Question

我正在为基于 Google map v3 的游戏制作六边形网格，但遇到了问题。

在我单击一个六边形后，显示不同的值，与所有六边形内部的标记不同。

正确的值显示在四分之一六边形的左下角。coord_slug 的值是根据坐标 lat、lng 制定的。

我必须做什么才能使六边形和标记值相同？这样上六边形为 55.3,14.8，下六边形为 55.25,1485。

我需要在游戏中使用这些值来从数据库下载日期。

负责显示值的部分:

function set_window(event) {
    // Set Parameters
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    var coord_slug = (Math.round(lat * 20) / 20) + ',' + (Math.round(lng * 20) / 20);
alert(coord_slug);
}

脚本的工作部分在这里:

function round_down(n) {
    if (n > 0) {
      return Math.ceil(n / 0.05) * 0.05;
    } else {
      return 0;
    }
  }

var map;
var pointCount = 0;
var locations = [];
var gridWidth = 3660; // hex tile size in meters
var bounds;

var places = [
  [55.3, 14.8],
  [55.25, 14.85],
]

var SQRT3 = 1.73205080756887729352744634150587236;

$(document).ready(function(){
  
  bounds = new google.maps.LatLngBounds();
  
  map = new google.maps.Map(document.getElementById("map_canvas"), {center: {lat: 55.27, lng: 14.8}, zoom: 10});
  
  // Adding a marker just so we can visualize where the actual data points are.
  // In the end, we want to see the hex tile that contain them
  places.forEach(function(place, p){
    
    latlng = new google.maps.LatLng({lat: place[0], lng: place[1]});
    marker = new google.maps.Marker({
		position: latlng, 
		map: map})
		marker.addListener('click', set_window);
    
    // Fitting to bounds so the map is zoomed to the right place
    bounds.extend(latlng);
  });
  
  
  
  // Now, we draw our hexagons! (or try to)
  locations = makeBins(places);
  
  locations.forEach(function(place, p){
    drawHorizontalHexagon(map, place, gridWidth);
  })
    
    
});

  
  function drawHorizontalHexagon(map, position, radius){
    var coordinates = [];
    for(var angle= 0;angle < 360; angle+=60) {
       coordinates.push(google.maps.geometry.spherical.computeOffset(position, radius, angle));    
    }

    // Construct the polygon.
    var polygon = new google.maps.Polygon({
        paths: coordinates,
        position: position,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        geodesic: true
    });
    polygon.setMap(map);
    polygon.addListener('click', set_window);
}

// Below is my attempt at porting binner.py to Javascript.
// Source: https://github.com/coryfoo/hexbins/blob/master/hexbin/binner.py

function distance(x1, y1, x2, y2){
  console.log(x1, y1, x2, y2);
  result =  Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
  console.log("Distance: ", result);
  return
}

function nearestCenterPoint(value, scale){
    div = value / (scale/2);
    console.log("div", div);
    mod = value % (scale/2);
    console.log("mod", mod);
    
    if(div % 2 == 1){
      increment = 1;
    } else{
      increment = 0;
    }
    
    rounded = scale / 2 * (div + increment);
    
    if(div % 2 === 0){
      increment = 1;
    } else{
      increment = 0;
    }
    
    rounded_scaled = scale / 2 * (div + increment);
    
    result = [rounded, rounded_scaled]
    console.log("nearest centerpoint to", value, result);
    return result;
}

function makeBins(data){
  bins = [];
  
  data.forEach(function(place, p){
    x = place[0];
    y = place[1];
    
    console.log("Original location:", x, y);
    
    px_nearest = nearestCenterPoint(x, gridWidth);
    
    py_nearest = nearestCenterPoint(y, gridWidth * SQRT3);
    
    z1 = distance(x, y, px_nearest[0], py_nearest[0]);
    z2 = distance(x, y, px_nearest[1], py_nearest[1]);
    
    if(z1 > z2){
      bin = new google.maps.LatLng({lat: px_nearest[0], lng: py_nearest[0]});
       console.log("Final location:", px_nearest[0], py_nearest[0]);
    } else {
      bin = new google.maps.LatLng({lat: px_nearest[1], lng: py_nearest[1]});
       console.log("Final location:", px_nearest[1], py_nearest[1]);
    }
  
    bins.push(bin);
    
  })
  return bins;
}
function set_window(event) {
    // Set Parameters
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    var coord_slug = (Math.round(lat * 20) / 20) + ',' + (Math.round(lng * 20) / 20);
alert(coord_slug);
}

<html>

  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
  </head>

  <body>
    <div id="map_canvas" style="width:100%; height:80vh;">
    </div>
  </body>

</html>

附加链接: The working part of the script in Plunger

Answer 1

您正在为多边形设置一个 position 属性，这似乎就是您想要显示的内容...

所以你可以替换以下内容

polygon.addListener('click', set_window);

通过这个:

polygon.addListener('click', function() {

  var polyPosition = this.position.lat() + ', ' + this.position.lng();
  alert(polyPosition);
});