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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html GoogleMapでデータバインドhttp://bl.ocks.org/ANTON072/98a0a8f77094797dd3b1相关的知识，希望对你有一定的参考价值。

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

  <input type="checkbox" id="markerChkbox" checked> マーカーの表示/非表示
  <div id="map_canvas"></div>

  <script>

  function initialize(){
    var mapDiv = document.getElementById('map_canvas');
    // 地図の作成
    var mapCanvas = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(0.1, 0.1),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var mvcObject = new google.maps.MVCObject();
    mvcObject.set('visible2', true);

    var markerChkbox = document.getElementById('markerChkbox');
    google.maps.event.addDomListener(markerChkbox, 'click', function(){
      mvcObject.set('visible2', markerChkbox.checked);
    });

    // マーカーを10個作成
    var center = mapCanvas.getCenter();
    for (var i = 0; i < 10; i++) {
      var marker = createMarker({
        position: new google.maps.LatLng(center.lat() + Math.random() * 3 - 1.5, center.lng() + Math.random() * 3 - 1.5),
        map: mapCanvas
      });
      // MVCオブジェクトにバインドさせる
      // key, target, targetKey, noNitify
      marker.bindTo('visible', mvcObject, 'visible2', true);
    }

    function createMarker(opts){
      return new google.maps.Marker(opts);
    }
  }

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

</body>
</html>

以上是关于html GoogleMapでデータバインドhttp://bl.ocks.org/ANTON072/98a0a8f77094797dd3b1的主要内容，如果未能解决你的问题，请参考以下文章

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

csharp Xamarinでに选取器枚举をバインド

text 入力フォームのバインディング

sh GitHubリリースページに実行バイナリの拉闸いている时，このコマンドでウンロードできる（'·‿·`）#swift #CodePiece

sh AWSでnginx的のインストールとコマンド

xml [WPF]コードビハインド侧でアニメーション制御.DataGridの行を実行时にアニメーション制御。