Question

下面的代码，但无法在下面的代码中设置中心位置。我发现了一些提示，但不幸的是我无法成功地将它们实现到我的代码中。

有人可以帮忙吗？

＆＃13;

<html>

<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {
      packages: ['map']
    });
    google.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');
      data.addColumn('string', 'Marker'),

        data.addRows([
          ['London, England', 'TouristMagnet', 'london'],
          ['Paris, France', 'TouristMagnet', 'paris'],
          ['Dubai, United Arab Emirates', 'TouristMagnet', 'dubai'],
          ['Istanbul, Turkey', 'TouristMagnet', 'istanbul'],
          ['Barcelona, Spain', 'TouristMagnet', 'barcelona'],
          ['Amsterdam, Netherlands', 'TouristMagnet', 'amsterdam'],
          ['Milan, Italy', 'TouristMagnet', 'milan'],
          ['Rome, Italy', 'TouristMagnet', 'rome'],
          ['Vienna, Austria', 'TouristMagnet', 'vienna'],
          ['Prague, Czech Republic', 'TouristMagnet', 'prague'],
          ['Athens, Greece', 'TouristMagnet', 'athens'],
          ['Moscow, Russia', 'TouristMagnet', 'moscow'],
          ['Berlin, Germany', 'TouristMagnet', 'berlin'],
          ['Sofia, Bulgaria', 'TouristMagnet', 'sofia'],
          ['Budapest, Hungary', 'TouristMagnet', 'budapest'],
          ['Sydney, Australia', 'TouristMagnet', 'sydney'],
          ['Venice, Italy', 'TouristMagnet', 'venice']
        ]);
      var url = 'http://dfsm9194vna0o.cloudfront.net/';

      var options = {
        zoomLevel: 5,
        showTip: false,
        useMapTypeControl: true,
        icons: {
          london: {
            normal: url + '1401895-0-london100.png',
            selected: url + '1401898-0-london200.png'
          },
          paris: {
            normal: url + '1401894-0-paris100.png',
            selected: url + '1401897-0-paris200.png'
          },
          dubai: {
            normal: url + '1401892-0-dubai100.png',
            selected: url + '1401893-0-dubai200.png'
          },
          istanbul: {
            normal: url + '1401890-0-istanbul100.png',
            selected: url + '1401891-0-istanbul200.png'
          },
          barcelona: {
            normal: url + '1401886-0-barcelona100.png',
            selected: url + '1401888-0-barcelona200.png'
          },
          amsterdam: {
            normal: url + '1401883-0-amsterdam100.png',
            selected: url + '1401885-0-amsterdam200.png'
          },
          milan: {
            normal: url + '1401881-0-milan100.png',
            selected: url + '1401882-0-milan200.png'
          },
          rome: {
            normal: url + '1401876-0-rome100.png',
            selected: url + '1401877-0-rome200.png'
          },
          vienna: {
            normal: url + '1401874-0-vienna100.png',
            selected: url + '1401875-0-vienna200.png'
          },
          prague: {
            normal: url + '1401872-0-prague100.png',
            selected: url + '1401873-0-prague200.png'
          },
          athens: {
            normal: url + '1401870-0-athens100.png',
            selected: url + '1401871-0-athens200.png'
          },
          moscow: {
            normal: url + '1401868-0-moscow100.png',
            selected: url + '1401869-0-moscow200.png'
          },
          berlin: {
            normal: url + '1401866-0-berlin100.png',
            selected: url + '1401867-0-berlin200.png'
          },
          sofia: {
            normal: url + '1401864-0-sofia100.png',
            selected: url + '1401865-0-sofia200.png'
          },
          budapest: {
            normal: url + '1401860-0-budapest100.png',
            selected: url + '1401863-0-budapest200.png'
          },
          sydney: {
            normal: url + '1401858-0-sydney100.png',
            selected: url + '1401859-0-sydney200.png'
          },
          venice: {
            normal: url + '1401852-0-venice100.png',
            selected: url + '1401855-0-venice200.png'
          }
        }
      };
      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="map_div" style="height: 600px; width: 1000px"></div>
</body>

</html>

＆＃13;

Answer 1

你没有画一个google.maps.Map，它是一个google.visualization.Map，它没有实现设置中心的方法。

默认情况下，它位于行（位置）的中间位置。

您只能根据行来居中。

当你例如想要将其居中于特定行的位置，您必须通过setSelection以编程方式选择行。

迪拜的示例（数据集中的第3行，因此rowIndex为2）

google.load('visualization', '1.1', {
      packages: ['map']
    });
    google.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');
      data.addColumn('string', 'Marker'),
      //removed some rows to speed it up
        data.addRows([
          ['London, England', 'TouristMagnet', 'london'],
          ['Paris, France', 'TouristMagnet', 'paris'],
          ['Dubai, United Arab Emirates', 'TouristMagnet', 'dubai'],
          ['Istanbul, Turkey', 'TouristMagnet', 'istanbul'],
          ['Barcelona, Spain', 'TouristMagnet', 'barcelona'],
          ['Amsterdam, Netherlands', 'TouristMagnet', 'amsterdam']
        ]);
      var url = 'http://dfsm9194vna0o.cloudfront.net/';

      var options = {
        zoomLevel: 5,
        showTip: false,
        useMapTypeControl: true,
        icons: {
          london: {
            normal: url + '1401895-0-london100.png',
            selected: url + '1401898-0-london200.png'
          },
          paris: {
            normal: url + '1401894-0-paris100.png',
            selected: url + '1401897-0-paris200.png'
          },
          dubai: {
            normal: url + '1401892-0-dubai100.png',
            selected: url + '1401893-0-dubai200.png'
          },
          istanbul: {
            normal: url + '1401890-0-istanbul100.png',
            selected: url + '1401891-0-istanbul200.png'
          },
          barcelona: {
            normal: url + '1401886-0-barcelona100.png',
            selected: url + '1401888-0-barcelona200.png'
          },
          amsterdam: {
            normal: url + '1401883-0-amsterdam100.png',
            selected: url + '1401885-0-amsterdam200.png'
          },
          milan: {
            normal: url + '1401881-0-milan100.png',
            selected: url + '1401882-0-milan200.png'
          },
          rome: {
            normal: url + '1401876-0-rome100.png',
            selected: url + '1401877-0-rome200.png'
          },
          vienna: {
            normal: url + '1401874-0-vienna100.png',
            selected: url + '1401875-0-vienna200.png'
          },
          prague: {
            normal: url + '1401872-0-prague100.png',
            selected: url + '1401873-0-prague200.png'
          },
          athens: {
            normal: url + '1401870-0-athens100.png',
            selected: url + '1401871-0-athens200.png'
          },
          moscow: {
            normal: url + '1401868-0-moscow100.png',
            selected: url + '1401869-0-moscow200.png'
          },
          berlin: {
            normal: url + '1401866-0-berlin100.png',
            selected: url + '1401867-0-berlin200.png'
          },
          sofia: {
            normal: url + '1401864-0-sofia100.png',
            selected: url + '1401865-0-sofia200.png'
          },
          budapest: {
            normal: url + '1401860-0-budapest100.png',
            selected: url + '1401863-0-budapest200.png'
          },
          sydney: {
            normal: url + '1401858-0-sydney100.png',
            selected: url + '1401859-0-sydney200.png'
          },
          venice: {
            normal: url + '1401852-0-venice100.png',
            selected: url + '1401855-0-venice200.png'
          }
        }
      };
      var map = new google.visualization.Map(document.getElementById('map_div'));
      google.visualization.events.addOneTimeListener(map, 'ready', function(){ 
        map.setSelection([{row:2, column:null}]);
        map.setSelection(null);
      });
      map.draw(data, options);
    }

html,body,#map_div{height:100%;margin:0;padding:0;}

<div id="map_div" ></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

如何设置谷歌地图的中心位置

1 个答案: