设置中心与数组值 - 谷歌地图API

setCenter with array values - Google Maps API

本文关键字：谷歌地图 API 数组 设置中心      更新时间：2023-09-26

我正在尝试使用setCenter在HTML菜单中处理Javascript多维数组的值。

HTML 菜单示例 

 <li><a onclick="map.setCenter(cityList[0][1], cityList[0][2]); return false"><script>document.write(cityList[0][0]);</script> </a></li>

爪哇语

  var cityList = [
    ['Atlanta, GA', 33.840644, -84.238972, 1],
    ['Austin, TX', 30.402887, -97.721606, 2],
    ['Boston, MA', 42.364247, -71.078575, 3],
    ['Chicago, IL', 41.898111, -87.638394, 4]
];

我也用自定义控件尝试过这个，但得到了相同的结果：

  google.maps.event.addDomListener(btnAtl, 'click', function() {
    map.setCenter(cityList[0][1], cityList[0][2])
  });

控制台错误

  Uncaught InvalidValueError: setCenter: not a LatLng or LatLngLiteral: not an Object

来自文档。

google.maps.Map.setCenter将google.maps.LatLng或LatLngLiteral作为参数。

这应该有效：

<li><a onclick="map.setCenter(new google.maps.LatLng(cityList[0][1], cityList[0][2])); return false"><script>document.write(cityList[0][0]);</script> </a></li>

工作代码片段：

var map;
var cityList = [
  ['Atlanta, GA', 33.840644, -84.238972, 1, "text 0"],
  ['Austin, TX', 30.402887, -97.721606, 2, "text 1"],
  ['Boston, MA', 42.364247, -71.078575, 3, "text 2"],
  ['Chicago, IL', 41.898111, -87.638394, 4, "text 3"]
];
function initialize() {
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(46.8, 1.7),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  setMarkers(map, cityList);
}
function setMarkers(map, locations) {
  var bounds = new google.maps.LatLngBounds();
  var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';
  for (var i = 0; i < locations.length; i++) {
    var city = locations[i];
    var myLatLng = new google.maps.LatLng(city[1], city[2]);
    bounds.extend(myLatLng);
    var infoWindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
    });
    document.getElementById('sidebar').innerHTML += '<li><a onclick="map.setCenter(new google.maps.LatLng(' + city[1] + ',' + city[2] + ')); return false">' + city[0] + '</a></li>';
    (function(i) {
      google.maps.event.addListener(marker, "click", function() {
        var galeries = locations[i];
        infoWindow.close();
        infoWindow.setContent(
          "<div id='boxcontent'><a href='" + city[0] + "'><strong style='color:black'>" + galeries[0] + "</strong></a><br />" + city[4] + "</div>");
        infoWindow.open(map, this);
      });
    })(i);
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<table border="1" style="height:100%; width:100%">
  <tr style="height:100%; width:100%">
    <td style="height:100%; width:80%">
      <div id="map_canvas" style="border: 2px solid #3872ac;"></div>
    </td>
    <td style="height:100%; width:20%">
      <div id="sidebar"></div>
    </td>
  </tr>
</table>

相关文章：