Question

我正在实施Google Maps API，我需要做的是当我点击地图时应该在单独的文本字段中捕获坐标，经度和纬度，即输入显示长度和另一个输入纬度的时刻可以捕获坐标和点击，但当我检查console.log（latlng.lat）; NAN显示console.log（latlng.lng）;很适合让我正确地协调。

当我在文件.js中添加此行：var geocoder = new google.maps.Geocoder（）;

显示此错误：未捕获Eb {消息：“initMap不是函数”，名称：“InvalidValueError”，堆栈：“错误↵新Eb（https://maps.googleapis.com/m ... MY_API_KEY＆amp; callback = initMap：131：73 “}

请帮帮我。

HTML：

<div id="map-wrapper">
    <div id="floating-panel">

      <label>latitud y longitus juntas:</label>
      <input id="latlng" type="text" value="40.714224,-73.961452">

      <label>latitud</label>
      <input id="latitud" type="text" value="">

      <label>Longitud</label>
      <input id="longitud" type="text" value="">

      <input id="submit" type="button" value="Geocode">
    </div>
  </div>
      <div id="map"></div>  
      <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap" async defer></script>

JS：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 20,
    center: {lat: -34.397, lng: 150.644}
  });
  var geocoder = new google.maps.Geocoder();

  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });

  map.addListener('click', function(e) {
    placeMarkerAndPanTo(e.latLng, map);
  });

  var infowindow = new google.maps.InfoWindow;
}

function placeMarkerAndPanTo(latLng, map, infowindow) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
  map.panTo(latLng);

  console.log('la latitud y longitud inicial  son: '+ latLng);
  jQuery('#latlng').val(latLng);
  var input = document.getElementById('latlng').value;
  console.log('la latitud y longitud nuevas son: '+ input);
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  console.log('la longitud real es: '+ latlng.lng);
  console.log('la latitud real es: '+ latlng.lat);
}

Answer 1

input.split(',', 2);返回：

0:"(37.4419"
1:" -122.14190000000002)"

第0个条目不是数字。

input = input.substring(1,input.indexOf(')'));
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
console.log('longitude: '+ latlng.lng);
console.log('latitude: '+ latlng.lat);

proof of concept fiddle

代码段

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  infowindow = new google.maps.InfoWindow();
  placeMarkerAndPanTo(map.getCenter(), map, infowindow);

}
google.maps.event.addDomListener(window, "load", initialize);

function placeMarkerAndPanTo(latLng, map, infowindow) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
  map.panTo(latLng);

  jQuery('#latlng').val(latLng);
  var input = document.getElementById('latlng').value;

  input = input.substring(1, input.indexOf(')'));
  console.log(input);
  var latlngStr = input.split(',', 2);
  var latlng = {
    lat: parseFloat(latlngStr[0]),
    lng: parseFloat(latlngStr[1])
  };
  console.log('longitude: ' + latlng.lng); //this work fine
  console.log('latitude: ' + latlng.lat); // this show NAN       
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="latlng" />
<div id="map_canvas"></div>

latlng.lat在谷歌地图中显示NaN

1 个答案: