【问题标题】:How to set center position for google maps如何设置谷歌地图的中心位置
【发布时间】:2016-01-16 02:13:17
【问题描述】:

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

有人可以帮忙吗?

<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>

【问题讨论】:

    标签: javascript html google-maps google-visualization


    【解决方案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>

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-05
    • 2013-01-09
    • 1970-01-01
    • 1970-01-01
    • 2011-07-27
    相关资源
    最近更新 更多