映射 onClick 处理程序失败 - InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number答案

【问题标题】：Map onClick Handler Fails - InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number映射 onClick 处理程序失败 - InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
【发布时间】：2017-06-17 12:43:06
【问题描述】：

我有一个带有 GMap 和 Streetview div 的简单页面。虽然外部链接在两个 div 中都设置了新位置，但尝试在地图点击处理程序中这样做会失败。（我怀疑可能缺少一些关闭规则。）脚本如下：

var map, panorama;

function do_show ( a, b ) {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: a, lng: b}, zoom: 14
        });

    map.addListener ( 'click', function(e) {

        do_show ( e.latLng.lat().toFixed(6), e.latLng.lng().toFixed(6) );
        } );        // end addListener()                    

    panorama = new google.maps.StreetViewPanorama(
            document.getElementById('pano'), {
                position: {lat: a, lng: b},
                pov: { heading: 34, pitch: 10 }
                });
    map.setStreetView(panorama);
}       // end function do_show()

function pre_init () {
    panorama = map = null;
    do_show( 42.345573,  -71.098326 );      // Boston
    }
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=pre_init">
</script>

【问题讨论】：

JavaScript 控制台报错了吗？

标签： javascript google-maps google-street-view

【解决方案1】：

我在 javascript 控制台中收到不言自明的错误：InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number（它们是字符串，而不是数字）。从它们中删除.toFixed(6)。

map.addListener ( 'click', function(e) {

   do_show ( e.latLng.lat(), e.latLng.lng() );
});        // end addListener()

proof of concept fiddle

代码 sn-p：

html,
body,
#map,
#pano {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#map {
  width: 50%;
  float: right;
}

#pano {
  width: 50%;
}

<script>
  var map, panorama;

  function do_show(a, b) {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: a,
        lng: b
      },
      zoom: 14
    });

    map.addListener('click', function(e) {

      do_show(e.latLng.lat(), e.latLng.lng());
    }); // end addListener()                    

    panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {
          lat: a,
          lng: b
        },
        pov: {
          heading: 34,
          pitch: 10
        }
      });
    map.setStreetView(panorama);
  } // end function do_show()

  function pre_init() {
    panorama = map = null;
    do_show(42.345573, -71.098326); // Boston
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=pre_init">
</script>
<div id="map"></div>
<div id="pano"></div>

【讨论】：