html googlemapの情报ウインドウにフォームを表示するhttp://bl.ocks.org/ANTON072/f19a3eb2e02f3d723d7d

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html googlemapの情报ウインドウにフォームを表示するhttp://bl.ocks.org/ANTON072/f19a3eb2e02f3d723d7d相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #map_canvas {
    width: 600px;
    height: 450px;
  }
  </style>
  <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDg13xe7Kt-Kwb0K-3ThoyyXkO38hvWt9I&?sensor=TRUE"></script>
</head>
<body>

  <div id="map_canvas"></div>

  <form id="markerPropertyForm">
    <div>
      marker icon:<br>
      <input type="text" id="iconTxt" size="32">
      <input type="button" id="changeBtn" value="変更">
    </div>
  </form>

  <script>

  function initialize(){
    var mapDiv = document.getElementById('map_canvas');
    var mapCanvas = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(35.681382, 139.766084),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // マーカーを表示
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(35.681382, 139.766084),
      map: mapCanvas
    });

    // フォームを取得
    var form = document.getElementById('markerPropertyForm');
    var changeBtn = document.getElementById('changeBtn');
    var iconTxt = document.getElementById('iconTxt');
    google.maps.event.addDomListener(changeBtn, 'click', function(){
      marker.setIcon(iconTxt.value);
    });

    // 情報ウインドウの表示
    var infofWnd = new google.maps.InfoWindow({
      position: new google.maps.LatLng(35.681382, 139.766084),
      content: form
    });
    infofWnd.open(null, marker);

    google.maps.event.addListener(mapCanvas, 'zoom_changed', function(){
      console.log('zoom change');
      var zoom = mapCanvas.getZoom();
      console.log(zoom);
      // 最大2
      var iconSize = -(1/20) * zoom + 2;
      console.log(iconSize);
      var imgUrl = 'http://chart.googleapis.com/chart?chst=d_map_spin&chld=' + iconSize + '|0|FF8429|23|b|' + zoom;
      marker.setIcon(imgUrl);
    });

  }

  google.maps.event.addDomListener(window, 'load', initialize);
  </script>

</body>
</html>

以上是关于html googlemapの情报ウインドウにフォームを表示するhttp://bl.ocks.org/ANTON072/f19a3eb2e02f3d723d7d的主要内容，如果未能解决你的问题，请参考以下文章

markdown 画像のEXIF情报をコマンドラインで取得

r 类の値変动にフォーカスして改善ポイントを出す

html ページの迁移时にフェードアウト，フェードイン效果をだすためのjQuery的プラグイン

python 画面外にふっとんだ玛雅のウィンドウを救出する

csharp 统一のシーンファイルリストウィンドウ。全てのシーン，ビルド登录シーンを切り替え可。

html GoogleMapでデータバインドhttp://bl.ocks.org/ANTON072/98a0a8f77094797dd3b1