1

そこで、Google マップと、緯度と経度の 2 つのフィールドで構成される単純なフォームが必要な HTML ページを作成しています。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_0qaGwK5ZWdKYXHRlJ-05CI_geHWo6v4&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

したがって、これは、この行の値を変更するフォームを作成する必要があると考えなければならないことから、マップを埋め込むコードです:

center: new google.maps.LatLng(-34.397, 150.644)

更新ボタンまたは送信ボタンを押すたびに更新されます。フォームの作成方法は知っていますが、上記のコードで正確に使用する方法がわかりません。

どんな助けでも大歓迎です。

4

4 に答える 4

12 
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script>
    var map;
    function initialize() {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    function pan() {
        var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
        map.panTo(panPoint)
     }
</script>
</head>
<body>
 <label>lat</label><input type="text" id="lat" />
<br/>
  <label>lng</label><input type="text" id="lng" />
 <input type="button" value="updateCenter" onclick="pan()" />


 <div id="map-canvas"></div>
 </body>
</html>
于 2013-04-30T09:46:32.500 に答える
2

GoogleマップのAPIドキュメントを使用できます

https://developers.google.com/maps/documentation/javascript/reference#Map

あなたの条件では、 set map メソッドを使用する必要があります：

<input type="button" onclick="map.setCenter(new google.maps.LatLng(-34.397, 150.644))" value="test"/>
于 2013-04-30T09:32:38.960 に答える
0

これはエレガントなソリューションで、カメラをポイントに移動します。

var myLatlng = new google.maps.LatLng(lat, lng);
map.panTo(myLatlng);

これはポイントに直接ジャンプします。

var myLatlng = new google.maps.LatLng(lat, lng);
map.setCenter(myLatlng);
于 2013-04-30T09:33:30.353 に答える