1. ayakix

    Posted

    ayakix
Changes in title
+Googleマップにフィールドワーク用のグリッドを表示する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,108 @@
+![スクリーンショット 2014-02-28 2.42.43 PM.png](https://qiita-image-store.s3.amazonaws.com/0/1706/e826fd17-4fd4-cd08-ff8d-9d38e616fad5.png)
+
+フィールドワーク時に,領域をグリッド上に分割して調査したくなることないですか?ないですね!
+
+
+```html
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+<head>
+ <title>Grid on Google Maps </title>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <style type="text/css">
+ .labels {
+ color : "#0000ff"
+ font-size : 15px;
+ text-align : center;
+ width : 30px;
+ white-space : nowrap;
+ }
+ </style>
+ <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+ <!-- view and download lib: http://www.ohloh.net/p/google-maps-utility-library-v3 -->
+ <script src="/YOUR_PATH/TO/markerwithlabel.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ var GRID_DIST = 5 // meter
+ var GRID_NUM = 20;
+ var DEFAULT_LAT = 35.681382;
+ var DEFAULT_LNG = 139.766084;
+
+ var map;
+ google.maps.event.addDomListener(window, 'load', function() {
+ var mapOptions = {
+ zoom : 20,
+ center : new google.maps.LatLng(DEFAULT_LAT, DEFAULT_LNG),
+ mapTypeId : google.maps.MapTypeId.ROADMAP,
+ scaleControl : true
+ };
+ map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
+ drawGrid(DEFAULT_LAT, DEFAULT_LNG);
+ });
+
+ function drawGrid(lat, lng) {
+ for(var i = 0; i <= GRID_NUM; i++) {
+ var pointsVertical = [
+ new google.maps.LatLng(lat , lng + getStepLng(lat, lng, i)),
+ new google.maps.LatLng(lat + getStepLat(lat, lng, GRID_NUM), lng + getStepLng(lat, lng, i)),
+ ];
+ drawLine(pointsVertical);
+
+ var pointsHorizontal = [
+ new google.maps.LatLng(lat + getStepLat(lat, lng, i) , lng),
+ new google.maps.LatLng(lat + getStepLat(lat, lng, i), lng + getStepLng(lat, lng, GRID_NUM)),
+ ];
+ drawLine(pointsHorizontal);
+ }
+ var codeA = "A".charCodeAt(0);
+ for(var i = 0; i < GRID_NUM; i++) {
+ for(var j = 0; j < GRID_NUM; j++) {
+ drawLabel(lat + getStepLat(lat, lng, i) + getStepLat(lat, lng, 1, GRID_DIST/2), lng + getStepLng(lat, lng, j) + getStepLng(lat, lng, 1, GRID_DIST/2), String.fromCharCode(codeA + i) + (j+1));
+ }
+ }
+ map.panTo(new google.maps.LatLng(lat + getStepLat(lat, lng, GRID_NUM/2), lng + getStepLng(lat, lng, GRID_NUM/2)));
+ }
+
+ var UNIT = 1.0 / 3600.0;
+ // refer http://mononofu.hatenablog.com/entry/20090324/1237894846
+ function getStepLat(lat, lng, step, dist) {
+ dist = dist || GRID_DIST;
+ var byou = 30.9064676;
+ return (UNIT * dist / byou) * step;
+ }
+ function getStepLng(lat, lng, step, dist) {
+ dist = dist || GRID_DIST;
+ var byou = 6378150 * Math.cos(lat / 180 * Math.PI) * 2 * Math.PI / (360 * 60 * 60);
+ return (UNIT * dist / byou) * step;
+ }
+
+ function drawLine(points) {
+ var polyLineOptions = {
+ path : points,
+ strokeWeight : 1,
+ strokeColor : "#0000ff",
+ strokeOpacity : "0.8"
+ };
+ var line = new google.maps.Polyline(polyLineOptions);
+ line.setMap(map);
+ }
+
+ function drawLabel(lat, lng, text) {
+ var marker = new MarkerWithLabel({
+ position : new google.maps.LatLng(lat, lng),
+ draggable : false,
+ raiseOnDrag : false,
+ map : map,
+ labelContent : text,
+ labelAnchor : new google.maps.Point(14, 10),
+ labelClass : "labels",
+ labelStyle : {opacity : 1.0},
+ icon : {},
+ });
+ }
+ </script>
+</head>
+<body>
+ <div id="gmap" style="width: 100%; height: 100%; border: 1px solid gray;"></div>
+</body>
+</html>
+```