{"id":2865,"date":"2013-06-01T18:25:28","date_gmt":"2013-06-01T09:25:28","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2865"},"modified":"2013-12-30T21:19:32","modified_gmt":"2013-12-30T12:19:32","slug":"post-2865","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/google-map-api\/2865","title":{"rendered":"[GMaps API v3] geometry\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3063\u3066\u8ddd\u96e2\u3084\u9762\u7a4d\u3092\u6e2c\u308b\u3002"},"content":{"rendered":"<p><a href=\"http:\/\/shimz.me\/example\/gmapv3\/geometry\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/06\/Gmap_geometry.jpg\" alt=\"Gmap_geometry\" width=\"590\" height=\"355\" class=\"alignnone size-full wp-image-2866\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/06\/Gmap_geometry.jpg 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/06\/Gmap_geometry-249x150.jpg 249w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/gmapv3\/geometry\/\">example<\/a><\/p>\n<p>Google Maps API\u306egeometry\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u5730\u56f3\u4e0a\u306e\u5730\u70b9\u9593\u306e\u8ddd\u96e2\u3084\u9762\u7a4d\u3092\u7c21\u5358\u306b\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\n<p>geometry\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3059\u308b\u969b\u306fGoogle Maps API\u306e\u8aad\u307f\u8fbc\u307f\u6642\u306b\u300clibraries=geometry\u300d\u3092\u4ed8\u3051\u3066\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n<pre class=\"lang:xhtml decode:true \" >&lt;script src=&quot;http:\/\/maps.googleapis.com\/maps\/api\/js?v=3.6&amp;sensor=false&amp;libraries=geometry&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<pre class=\"lang:js decode:true \" >google.maps.event.addDomListener(window, &quot;load&quot;, initialize);\r\n\r\n\r\nfunction initialize() {\r\n    google.maps.visualRefresh=true;\u3000\/\/Google map\u65b0\u30b9\u30bf\u30a4\u30eb\u3092\u4f7f\u7528\r\n    \r\n    \/\/Map\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\r\n    var mapDiv = document.getElementById(&quot;map_canvas&quot;);\r\n    var mapObj = new google.maps.Map(mapDiv, {\r\n        center : new google.maps.LatLng(36.322356, 139.013057),\r\n        zoom : 15,\r\n        mapTypeId : google.maps.MapTypeId.ROADMAP,\r\n        draggableCursor: &quot;crosshair&quot; \r\n    });\r\n\r\n    \/\/ \u30de\u30fc\u30ab\u30fc\u30fb\u30e9\u30a4\u30f3\u30fb\u30dd\u30ea\u30b4\u30f3\u60c5\u5831\u3092\u4fdd\u7ba1\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\r\n    var measure = {\r\n        mvcLine: new google.maps.MVCArray(),\r\n        mvcPolygon: new google.maps.MVCArray(),\r\n        mvcMarkers: new google.maps.MVCArray(),\r\n        line: null,\r\n        polygon: null\r\n    };\r\n\r\n    \/\/\u5730\u56f3\u306b\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3092\u8a2d\u5b9a\r\n    google.maps.event.addListener(mapObj, &quot;click&quot;, function(evt) {\r\n            \/\/\u5730\u56f3\u30af\u30ea\u30c3\u30af\u6642\u306b\u30de\u30fc\u30ab\u30fc\u3001\u30e9\u30a4\u30f3\u3001\u30dd\u30ea\u30b4\u30f3\u3092\u8ffd\u52a0\r\n            measureAdd(evt.latLng);\r\n    });\r\n\r\n\r\n    \/\/\u30de\u30fc\u30ab\u30fc\u3001\u30e9\u30a4\u30f3\u3001\u30dd\u30ea\u30b4\u30f3\u3092\u8ffd\u52a0\u3059\u308b\r\n    function measureAdd(latLng) {\r\n        \/\/\u65b0\u898f\u30de\u30fc\u30ab\u30fc\u4f5c\u6210\r\n        var marker = new google.maps.Marker({\r\n            map: mapObj,\r\n            position: latLng,\r\n            draggable: true,\r\n            raiseOnDrag: false,\r\n            title: &quot;\u30c9\u30e9\u30c3\u30b0\u3067\u79fb\u52d5\u3067\u304d\u307e\u3059&quot;\r\n        });\r\n\r\n        \/\/\u30e9\u30a4\u30f3\u60c5\u5831\u3092\u8ffd\u52a0\r\n        measure.mvcLine.push(latLng);\r\n        \/\/\u30dd\u30ea\u30b4\u30f3\u60c5\u5831\u3092\u8ffd\u52a0\r\n        measure.mvcPolygon.push(latLng);\r\n        \/\/\u30de\u30fc\u30ab\u30fc\u60c5\u5831\u3092\u8ffd\u52a0\r\n        measure.mvcMarkers.push(marker);\r\n\r\n        \/\/\u30e9\u30a4\u30f3\u306e\u9802\u70b9\u306e\u6570\u3092\u66f4\u65b0\r\n        var latLngIndex = measure.mvcLine.getLength() - 1;\r\n\r\n        \/\/\u30de\u30fc\u30ab\u30fc\u30c9\u30e9\u30c3\u30b0\u30a4\u30d9\u30f3\u30c8\u8a2d\u5b9a\u3001\u30c9\u30e9\u30c3\u30b0\u3055\u308c\u305f\u3089\u30e9\u30a4\u30f3\u60c5\u5831\u30fb\u30dd\u30ea\u30b4\u30f3\u60c5\u5831\u3092\u66f4\u65b0\u3059\u308b\r\n        google.maps.event.addListener(marker, &quot;drag&quot;, function(evt) {\r\n                measure.mvcLine.setAt(latLngIndex, evt.latLng);\r\n                measure.mvcPolygon.setAt(latLngIndex, evt.latLng);\r\n        });\r\n\r\n        \/\/\u30de\u30fc\u30ab\u30fc\u30c9\u30e9\u30c3\u30b0\u7d42\u4e86\u5f8c\u30a4\u30d9\u30f3\u30c8\u8a2d\u5b9a\u3001\u30de\u30fc\u30ab\u30fc\u306e\u30c9\u30e9\u30c3\u30b0\u30fb\u79fb\u52d5\u304c\u7d42\u308f\u3063\u305f\u3089\u8ddd\u96e2\u30fb\u9762\u7a4d\u306e\u8a08\u7b97\u3092\u884c\u3046\r\n        google.maps.event.addListener(marker, &quot;dragend&quot;, function() {\r\n            if (measure.mvcLine.getLength() &gt; 1) {\r\n                 measureCalc();\r\n            }\r\n        });\r\n\r\n        \/\/ \u30e9\u30a4\u30f3\u306e\u9802\u70b9\u304c\uff11\u4ee5\u4e0a\u3042\u308b\u5834\u5408\r\n        if (measure.mvcLine.getLength() &gt; 1) {\r\n            \/\/ \u30e9\u30a4\u30f3\u304c\u4f5c\u6210\u3055\u308c\u3066\u3044\u306a\u3051\u308c\u3070\u4f5c\u6210\u3059\u308b\r\n            if (!measure.line) {\r\n                measure.line = new google.maps.Polyline({\r\n                    map: mapObj,\r\n                    clickable: false,\r\n                    strokeColor: &quot;#FF0000&quot;,\r\n                    strokeOpacity: 1,\r\n                    strokeWeight: 3,\r\n                    path:measure. mvcLine\r\n                });\r\n            }\r\n\r\n            \/\/ \u30e9\u30a4\u30f3\u306e\u9802\u70b9\u304c\uff12\u3064\u4ee5\u4e0a\u3042\u308b\u5834\u5408\r\n            if (measure.mvcPolygon.getLength() &gt; 2) {\r\n                \/\/ \u30dd\u30ea\u30b4\u30f3\u304c\u4f5c\u6210\u3055\u308c\u3066\u3044\u306a\u3051\u308c\u3070\u4f5c\u6210\u3059\u308b\r\n                if (!measure.polygon) {\r\n                    measure.polygon = new google.maps.Polygon({\r\n                        clickable: false,\r\n                        map: mapObj,\r\n                        fillOpacity: 0.25,\r\n                        strokeOpacity: 0,\r\n                        paths: measure.mvcPolygon\r\n                    });\r\n                }\r\n            }\r\n        }\r\n\r\n        \/\/ \u30e9\u30a4\u30f3\u306e\u9802\u70b9\u306e\u6570\u304c\uff11\u4ee5\u4e0a\u306e\u6642\u306f\u8ddd\u96e2\u3068\u9762\u7a4d\u3092\u8a08\u7b97\u3059\u308b\r\n        if (measure.mvcLine.getLength() &gt; 1) {\r\n            measureCalc();\r\n        }\r\n    }\r\n\t\r\n\t\/\/\u8ddd\u96e2\u30fb\u9762\u7a4d\u306e\u8a08\u7b97\r\n    function measureCalc() {\r\n        \/\/ geometry\u30e9\u30a4\u30d6\u30e9\u30ea\u4f7f\u7528\u3057\u3066\u8ddd\u96e2\u3092\u8a08\u7b97\u3059\u308b\r\n        var length = google.maps.geometry.spherical.computeLength(measure.line.getPath());\r\n        jQuery(&quot;#distance&quot;).text(length.toFixed(1))\r\n\r\n        \/\/ \u30e9\u30a4\u30f3\u306e\u9802\u70b9\u304c\uff12\u3064\u4ee5\u4e0a\u3042\u308b\u5834\u5408\u306f\u9762\u7a4d\u3092\u8a08\u7b97\u3059\u308b\r\n        if (measure.mvcPolygon.getLength() &gt; 2) {\r\n            var area = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());\r\n            jQuery(&quot;#area&quot;).text(area.toFixed(1));\r\n        }\r\n    }\r\n\r\n    \/\/\u30de\u30fc\u30ab\u30fc\u30fb\u30e9\u30a4\u30f3\u30fb\u30dd\u30ea\u30b4\u30f3\u306e\u30ea\u30bb\u30c3\u30c8\r\n    function measureReset() {\r\n        \/\/ \u30dd\u30ea\u30b4\u30f3\u304c\u4f5c\u6210\u3055\u308c\u3066\u3044\u308b\u306a\u3089\u3070null\u3092\u30bb\u30c3\u30c8\r\n        if (measure.polygon) {\r\n            measure.polygon.setMap(null);\r\n            measure.polygon = null;\r\n        }\r\n        \/\/ \u30e9\u30a4\u30f3\u304c\u4f5c\u6210\u3055\u308c\u3066\u3044\u308b\u306a\u3089\u3070null\u3092\u30bb\u30c3\u30c8\r\n        if (measure.line) {\r\n            measure.line.setMap(null);\r\n            measure.line = null\r\n        }\r\n\r\n        \/\/MVCArrays\u306e\u30e9\u30a4\u30f3\u30fb\u30dd\u30ea\u30b4\u30f3\u60c5\u5831\u3092\u30af\u30ea\u30a2\r\n        measure.mvcLine.clear();\r\n        measure.mvcPolygon.clear();\r\n\r\n        \/\/ \u30de\u30fc\u30ab\u30fc\u3092\u524a\u9664\u3059\u308b\r\n        measure.mvcMarkers.forEach(function(elem, index) {\r\n            elem.setMap(null);\r\n        });\r\n        measure.mvcMarkers.clear();\r\n\r\n        jQuery(&quot;#distance,#area&quot;).text(0);\r\n    }\r\n    \r\n    \/\/\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u8a2d\u7f6e\r\n    $('#reset').click(measureReset);\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>example Google Maps API\u306eg&hellip;<\/p>\n","protected":false},"author":1,"featured_media":2866,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[],"class_list":["post-2865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-map-api","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=2865"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2865\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2866"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}