0

このマップのコードを「模倣」しようとしました:

https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple

Syney を Porto Alegre に変更するだけです (フォームの値と座標も)。しかし、マップ キャンバスが画面に表示されないため、問題が発生しました。コードを確認しましたが、タイプミスや構文ミスは見つかりませんでした。

誰かが助けてくれることを願っています。実際、私は Google Maps API よりも Fusion Tables に慣れています。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>GEOCODER</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>

var geocoder;
var map;
function initialize() {
   geocoder = new google.maps.Geocoder();
   var latlng = new google.maps.LatLng(-30.027704, -51,228735);
   var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress() {
   var address = document.getElementById("address").value;
   geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
         map.setCenter(results[0].geometry.location);
         var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
         });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
   );
  }
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 320px; height: 480px;"></div>
<div>
   <input id="address" type="textbox" value="Porto Alegre, Brasil">
   <input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
</html>
4

2 に答える 2

2

2行を入れ替えたため、構文エラーが発生した可能性があります。JavaScriptコンソールを確認すると、エラーメッセージが表示されます。JSが期待どおりのことを行わない場合は、実際にそれを行う必要があります（または、ほとんどの場合、予期しない間違いがないことを確認するために）。

あなたがこれを持っているところ：

      }
   );
  }
}
</script>

あなたはこれを求めている：

      }
   }
  );
}
</script>
于 2012-07-31T01:42:41.517 に答える
0

ヘッダーに CSS ファイルへの相対リンクを指定することに注意してください。これは Google のサーバーでは機能しますが、同じ相対パスを作成していない限り、おそらくあなたのサーバーでは機能しません。代わりにこれを試してください：

<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple/maps/documentation/javascript/examples/default.css" rel="stylesheet">
于 2012-07-31T01:53:53.957 に答える