当地图放大/缩小时，如何重新定位条形图位置

How to re-locate the bar-chart location when map zoom in/out

本文关键字：何重新 定位 条形图 位置 小时 地图 放大 缩小      更新时间：2023-09-26

代码现在可以使用SVG在Google地图上显示鸟类计数数据。

然而，新的问题来了，当地图放大/缩小时，条形图无法重新定位。

当我放大/缩小地图时，我希望条形图能够在正确的位置上找到它的(lat,lng)，但代码现在有这个问题。

我该如何修复它?有人能教我吗?

我的CSV:https://drive.google.com/file/d/0B6SUWnrBmDwSWkI4bVNtOTNSOTA/view?usp=sharing

<!DOCTYPE html>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
.gmap {
   display: block;
   width: 1000px;
   height: 800px;
}
.stations, .stations svg { position: absolute; }
.stations svg { width: 120px; height: 30px; padding-right: 100px; font: 12px     sans-serif; }
.stations circle { fill: yellow; stroke: black; stroke-width: 1.5px; }
</style>
<body>
<div class="gmap" id="map-canvas"></div>  
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
d3.csv("223-loc.csv", function(d) {
   return {
    date: d.date,
    location: d.location,
    lat: +d.lat,
    lng: +d.lng ,
    birdName: d.birdName,
    count:+d.count
  };
}, function(error, rows) {
 console.log(rows[0].lat);
  function BarChartOverlay(chartData, map){
    this.map_ = map;
    this.chartData_ = chartData;
    this.div_=null;
    this.setMap(map);
}
  BarChartOverlay.prototype = new google.maps.OverlayView();
BarChartOverlay.prototype.onAdd = function(){
    var overlayProjection = this.getProjection();
    var div = document.createElement('div');
    div.setAttribute('id','chartDiv');
    var chartArea = d3.select(div).append("svg");
    this.chartData_.forEach(function(item){
       var pos = overlayProjection.fromLatLngToDivPixel(new     google.maps.LatLng(item.lat, item.lng));
       var bar = chartArea
              .append("rect")
              .attr("x", pos.x)
              .attr("y", pos.y)
              .attr("width", 5)
              .attr("height", item.count)
              .attr("fill-opacity", '0.5')
              .attr("fill", 'purple');
});
this.div_ = div;
this.chartArea_ = chartArea;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);    
};
BarChartOverlay.prototype.draw = function(){
    var overlayProjection = this.getProjection();
        var sw =         overlayProjection.fromLatLngToDivPixel(this.map_.getBounds().getSouthWest());
    var ne =     overlayProjection.fromLatLngToDivPixel(this.map_.getBounds().getNorthEast());
    var chartAreaSize = sw.x + ' ' +  ne.y + ' ' + (ne.x - sw.x) + ' ' + (sw.y - ne.y);
this.chartArea_.attr('viewBox',chartAreaSize);
};
BarChartOverlay.prototype.onRemove = function(){
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
    };
function initialize() {
            var mapOptions = {
                zoom: 8, center: new
                 google.maps.LatLng(23.7147979, 120.7105502)
            };
            var chartData = rows;
            var map = new google.maps.Map(document.getElementById('map-    canvas'), mapOptions);
            var overlay = new BarChartOverlay(chartData, map);
}
initialize();
 });
</script>
</body>

你的图层不够聪明，你必须告诉他重新绘制:

google.maps.event.addListener(map, 'zoom_changed', function() {
    overlay.draw();
});

然而，对于你的情况，上面的代码根本不适合我(不知道为什么，它适用于我尝试过的所有其他情况)，所以我明确地将map添加到你的图层中，导致它重新绘制:

google.maps.event.addListener(map, 'zoom_changed', function() {
    overlay.setMap(map);
});
相关文章：