Question

经过多次尝试后，我申请了以前的答案，但没有得到适当的解决方案。实际上我希望当用户输入位置的地址时，我的代码必须在网络上的地图上显示该地址。但它没有发生。

convert.js ： -

geocoder=new google.maps.Geocoder();
function getCoordinates(address,callback)
{
    var coordinates;
    geocoder.geocode({address:address},function(results,status){
        alert('Called');
        coordsx=results[0].geometry.location;
        //coords1=results[0].geometry.location;
        coordinates=[coordsx.lat(),coordsx.lng()];
        callback(coordinates);
        //alert(coordinates)
    })

}

testmap.html

<!DOCTYPE html>
<html>
  <head>
  <title></title>
    <style>
      #map-canvas {
        width: 700px;
        height: 600px;
        position: absolute;
        top: 40px;
        left: 360px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="convert.js"></script>
    <script>
    google.maps.visualRefresh=true;
      function initialize() {
      var mapOptions;
      getCoordinates('J-24 MIG colony indore',function(coords){
      mapOptions = {
          center: new google.maps.LatLng(coords[0],coords[1]),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
       } 
       //map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
      alert('Func')
      alert(mapOptions.center);
      });
       map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas" height="100%" width="100%%"></div>
  </body>
</html>

Answer 1

行map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);需要位于定义function(coords){..的匿名函数mapOptions内。这应该有效：

<!DOCTYPE html>
<html>
  <head>
  <title></title>
    <style>
      #map-canvas {
        width: 700px;
        height: 600px;
        position: absolute;
        top: 40px;
        left: 360px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="convert.js"></script>
    <script>
    google.maps.visualRefresh=true;
      function initialize() {
      var mapOptions;
      getCoordinates('J-24 MIG colony indore',function(coords){
      mapOptions = {
          center: new google.maps.LatLng(coords[0],coords[1]),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
       } 
      map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
      });


      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas" height="100%" width="100%%"></div>
  </body>
</html>

Answer 2

问题是你没有放置地图对象，所以尝试将它们放在你的代码中，

map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

一定会有效

没有错误但是地图没有在网站中显示在js中只有背景部分可见，

2 个答案: