onClick处理程序失败 - InvalidValueError：setCenter：不是LatLng或LatLngLiteral：属性lat：不是数字 [英] Map onClick Handler Fails - InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number

问题描述

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

  var map，panorama; 
 
函数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））; 
}）; //结束addListener（）
 
全景=新google.maps.StreetViewPanorama（
 document.getElementById（'pano'），{
位置：{lat：a，lng： b}，
 pov：{heading：34，pitch：10} 
}）; 
 map.setStreetView（panorama）; 
} //结束函数do_show（）
 
函数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> 
  

解决方案

：InvalidValueError：setCenter：不是LatLng或LatLngLiteral：属性lat：不是数字（它们是字符串，不是数字）。从它们中移除 .toFixed（6）。

  map.addListener （'click'，function（e）{
 
 do_show（e.latLng.lat（），e.​​latLng.lng（））; 
}）; // end addListener（）
  

概念证明小提琴
$ b

代码段：

html，body，＃map，＃pano {height：100％; margin：0px; padding：0px} #map {width：50％; float：right;}＃pano {width：50％;}

<脚本> var map，panorama;函数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（））;}）; //结束addListener（）全景图= new google.maps.StreetViewPanorama（document.getElementById（'pano'），{position：{lat：a，lng：b}，pov：{heading：34，pitch：10}}） ; map.setStreetView（全景）; } //结束函数do_show（）函数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 =地图>< / div>< div id =pano>< / div>

I have a simple page with GMap and Streetview div's. While an external link sets a new location OK in both div's, trying to do so in the map click handler fails. (I suspect there may be some closure rule I'm missing.) Script is as follows:

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>

解决方案

I get the self-explanatory error in the javascript console: InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number (they are strings, not numbers). Remove the .toFixed(6) from them.

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

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

proof of concept fiddle

code snippet:

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>

这篇关于onClick处理程序失败 - InvalidValueError：setCenter：不是LatLng或LatLngLiteral：属性lat：不是数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！