{"id":617,"date":"2011-10-17T19:11:58","date_gmt":"2011-10-17T17:11:58","guid":{"rendered":"https:\/\/d-mueller.de\/blog\/?p=617"},"modified":"2011-10-17T21:08:33","modified_gmt":"2011-10-17T19:08:33","slug":"umkreissuche-latlong-und-der-radius","status":"publish","type":"post","link":"https:\/\/d-mueller.de\/blog\/umkreissuche-latlong-und-der-radius\/","title":{"rendered":"Umkreissuche: Lat\/Long und der Radius"},"content":{"rendered":"<p>\n<b>Aufgabenstellung:<\/b> Ich wei\u00df, wo ich mich befinde (<a href=\"http:\/\/en.wikipedia.org\/wiki\/Geographic_coordinate_system\">Lat \/ Long<\/a>, ist ja aus den Smartphones easy herauszubekommen) und habe einen Radius in km, in dem ich <a href=\"https:\/\/d-mueller.de\/blog\/open-streetmap-api-tutorial-umkreissuche\/\">POI&#8217;s mit der Open Streemap API<\/a> suchen m\u00f6chte.\n<\/p>\n<p>\n<b>Problem:<\/b> Die OSM API bietet keine (mir bekannte) M\u00f6glichkeit, um meinen aktuellen Standort herum eine Radius-Suche in km auszuf\u00fchren, sondern h\u00e4tte gern eine Bounding Box angegeben, die die Ecken der Box als Geo-Koordinaten angibt &#8211; siehe hier:<\/p>\n<pre data-enlighter-language=\"enlighter\" class=\"EnlighterJSRAW\">http:\/\/www.overpass-api.de\/api\/xapi?node[bbox=8.62,49.85,8.68,49.89][amenity=fast_food|pub][@meta]<\/pre>\n<p>Dabei spezifiziert der Parameter <i>bbox<\/i> die Lat\/Long-Koordinaten in der Reihenfolge <i>links, oben, rechts, unten<\/i>.<\/p>\n<p>Dazu erstmal zum Verst\u00e4ndnis:<\/p>\n<ul>\n<li>Der <a href=\"http:\/\/de.wikipedia.org\/wiki\/Breitengrad\">Breitengrad<\/a> (Latitude) gibt die Nord-S\u00fcdachse an, &#8222;50&#8220; ist n\u00f6rdlicher als &#8222;49&#8220;<\/li>\n<li>Der <a href=\"http:\/\/de.wikipedia.org\/wiki\/Geographische_L%C3%A4nge\">L\u00e4ngengrad<\/a> (Longitude) gibt die Ost-Westachse an, &#8222;5&#8220; ist westlicher als &#8222;6&#8220;<\/li>\n<\/ul>\n<h2>Berechnung<\/h2>\n<p>Nun haben wir also den eigenen Standort, wissen \u00fcber Lat\/Long Bescheid und wollen die Eckpunkte f\u00fcr die oben angesprochene Bounding Box errechnen. <a href=\"http:\/\/www.movable-type.co.uk\/scripts\/latlong-db.html\">Aufbauend auf diesem Artikel<\/a> habe ich folgende PHP-Funktion gebaut:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">\r\n$lat = 49.869059;\r\n$lon = 8.645318;\r\n$radius = 1.5;\r\n\r\n\/**\r\n * lat (breitengrad = nord -&gt; sued): 50 ist noerdlicher als 49\r\n * lon (l\u00e4ngengrad = west -&gt; ost): 5 ist westlicher als 6  \r\n *\/\r\nfunction getBoundingBox($lat, $lon, $radius)\r\n{\r\n\t$earth_radius = 6371;\r\n\t$maxLat = $lat + rad2deg($radius\/$earth_radius);\r\n\t$minLat = $lat - rad2deg($radius\/$earth_radius);\r\n\t$maxLon = $lon + rad2deg($radius\/$earth_radius\/cos(deg2rad($lat)));\r\n\t$minLon = $lon - rad2deg($radius\/$earth_radius\/cos(deg2rad($lat)));\r\n\t\r\n\treturn array\r\n\t(\r\n\t\t&quot;center&quot; =&gt; array(&quot;lat&quot; =&gt; $lat, &quot;lon&quot; =&gt; $lon),\r\n\t\t&quot;nw&quot; =&gt; array(&quot;lat&quot; =&gt; $maxLat, &quot;lon&quot; =&gt; $minLon), \r\n\t\t&quot;ne&quot; =&gt; array(&quot;lat&quot; =&gt; $maxLat, &quot;lon&quot; =&gt; $maxLon), \r\n\t\t&quot;sw&quot; =&gt; array(&quot;lat&quot; =&gt; $minLat, &quot;lon&quot; =&gt; $minLon),\r\n\t\t&quot;se&quot; =&gt; array(&quot;lat&quot; =&gt; $minLat, &quot;lon&quot; =&gt; $maxLon)\r\n\t);\r\n}\r\n\r\n$coords = getBoundingBox($lat, $lon, $radius);\r\n\r\nprint_r($coords);\r\n\/*\r\n\r\nArray\r\n(\r\n    [center] =&gt; Array\r\n        (\r\n            [lat] =&gt; 49.869059\r\n            [lon] =&gt; 8.645318\r\n        )\r\n\r\n    [nw] =&gt; Array\r\n        (\r\n            [lat] =&gt; 49.882548824089\r\n            [lon] =&gt; 8.6243885076019\r\n        )\r\n\r\n    [ne] =&gt; Array\r\n        (\r\n            [lat] =&gt; 49.882548824089\r\n            [lon] =&gt; 8.6662474923981\r\n        )\r\n\r\n    [sw] =&gt; Array\r\n        (\r\n            [lat] =&gt; 49.855569175911\r\n            [lon] =&gt; 8.6243885076019\r\n        )\r\n\r\n    [se] =&gt; Array\r\n        (\r\n            [lat] =&gt; 49.855569175911\r\n            [lon] =&gt; 8.6662474923981\r\n        )\r\n\r\n)\r\n*\/\r\n<\/pre>\n<p>Somit haben wir schonmal die Eckpunkte f\u00fcr den Radius 1,5km um unseren Mittelpunkt ausgerechnet. <\/p>\n<h2>Darstellen der Eckpunkte auf einer Google Map<\/h2>\n<p>Zur Verifikation der errechneten Eckpunkte muss Quick&#038;Dirty eine googlemap herhalten (<a href=\"http:\/\/code.google.com\/apis\/maps\/documentation\/javascript\/examples\/marker-simple.html\">inspiriert von hier<\/a>).<\/p>\n<pre data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/code.google.com\/apis\/maps\/documentation\/javascript\/examples\/default.css&quot; \/&gt;\r\n&lt;script src=&quot;http:\/\/maps.googleapis.com\/maps\/api\/js?sensor=false&quot;&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n\tfunction init() \r\n\t{\r\n\t\tvar markers = [];\r\n\r\n\t\t&lt;?php\r\n\t\tforeach ($coords as $desc =&gt; $latlong)\r\n\t\t{\r\n\t\t?&gt;\r\n\t\t\tmarkers.push({\r\n\t\t\t\t&#039;lat&#039; : &lt;?php echo $latlong[&#039;lat&#039;]; ?&gt;, \r\n\t\t\t\t&#039;lon&#039; : &lt;?php echo $latlong[&#039;lon&#039;]; ?&gt;,\r\n\t\t\t\t&#039;desc&#039; : &quot;&lt;?php echo $desc; ?&gt;&quot;\r\n\t\t\t});\r\n\t\t&lt;?php\r\n\t\t}\r\n\t\t?&gt;\r\n\r\n\t\tvar map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), {\r\n\t\t\tzoom: 11,\r\n\t\t\tcenter: new google.maps.LatLng(&lt;?php echo $coords[&#039;center&#039;][&#039;lat&#039;] . &quot;,&quot; . $coords[&#039;center&#039;][&#039;lon&#039;]; ?&gt;),\r\n\t\t\tmapTypeId: google.maps.MapTypeId.ROADMAP\r\n\t\t});\r\n\r\n\t\tfor (var i = 0; i &lt; markers.length; i++) {\r\n\t\t\tnew google.maps.Marker({\r\n\t\t\t\tposition: new google.maps.LatLng(markers[i].lat, markers[i].lon), \r\n\t\t\t\tmap: map,\r\n\t\t\t\ttitle: markers[i].desc\r\n\t\t\t});   \r\n\t\t}\r\n\t}\r\n  \r\n  window.onload = init;\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;div id=&quot;map_canvas&quot;&gt;&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<div id=\"attachment_618\" style=\"width: 614px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/d-mueller.de\/blog\/wp-content\/uploads\/2011\/10\/radius.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-618\" src=\"https:\/\/d-mueller.de\/blog\/wp-content\/uploads\/2011\/10\/radius.png\" alt=\"radius\" title=\"radius\" width=\"604\" height=\"586\" class=\"size-full wp-image-618\" srcset=\"https:\/\/d-mueller.de\/blog\/wp-content\/uploads\/2011\/10\/radius.png 604w, https:\/\/d-mueller.de\/blog\/wp-content\/uploads\/2011\/10\/radius-300x291.png 300w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/a><p id=\"caption-attachment-618\" class=\"wp-caption-text\">radius<\/p><\/div>\n<p>Sieht doch gut aus. Somit haben wir unsere Bounding Box Koordinaten auch visuell dargestellt und k\u00f6nnen die OSM API damit f\u00fcttern.<\/p>\n<p>Und hier nochmal der komplette Code:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">\r\n&lt;?php\r\n$lat = 49.869059;\r\n$lon = 8.645318;\r\n$radius = 1.5;\r\n\r\n\/**\r\n * lat (breitengrad = nord -&gt; sued): 50 ist noerdlicher als 49\r\n * lon (l\u00e4ngengrad = west -&gt; ost): 5 ist westlicher als 6  \r\n *\/\r\nfunction getBoundingBox($lat, $lon, $radius)\r\n{\r\n\t$earth_radius = 6371;\r\n\t$maxLat = $lat + rad2deg($radius\/$earth_radius);\r\n\t$minLat = $lat - rad2deg($radius\/$earth_radius);\r\n\t$maxLon = $lon + rad2deg($radius\/$earth_radius\/cos(deg2rad($lat)));\r\n\t$minLon = $lon - rad2deg($radius\/$earth_radius\/cos(deg2rad($lat)));\r\n\t\r\n\treturn array\r\n\t(\r\n\t\t&quot;center&quot; =&gt; array(&quot;lat&quot; =&gt; $lat, &quot;lon&quot; =&gt; $lon),\r\n\t\t&quot;nw&quot; =&gt; array(&quot;lat&quot; =&gt; $maxLat, &quot;lon&quot; =&gt; $minLon), \r\n\t\t&quot;ne&quot; =&gt; array(&quot;lat&quot; =&gt; $maxLat, &quot;lon&quot; =&gt; $maxLon), \r\n\t\t&quot;sw&quot; =&gt; array(&quot;lat&quot; =&gt; $minLat, &quot;lon&quot; =&gt; $minLon),\r\n\t\t&quot;se&quot; =&gt; array(&quot;lat&quot; =&gt; $minLat, &quot;lon&quot; =&gt; $maxLon)\r\n\t);\r\n}\r\n\r\n$coords = getBoundingBox($lat, $lon, $radius);\r\n?&gt;\r\n\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/code.google.com\/apis\/maps\/documentation\/javascript\/examples\/default.css&quot; \/&gt;\r\n&lt;script src=&quot;http:\/\/maps.googleapis.com\/maps\/api\/js?sensor=false&quot;&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n\tfunction init() \r\n\t{\r\n\t\tvar markers = [];\r\n\r\n\t\t&lt;?php\r\n\t\tforeach ($coords as $desc =&gt; $latlong)\r\n\t\t{\r\n\t\t?&gt;\r\n\t\t\tmarkers.push({\r\n\t\t\t\t&#039;lat&#039; : &lt;?php echo $latlong[&#039;lat&#039;]; ?&gt;, \r\n\t\t\t\t&#039;lon&#039; : &lt;?php echo $latlong[&#039;lon&#039;]; ?&gt;,\r\n\t\t\t\t&#039;desc&#039; : &quot;&lt;?php echo $desc; ?&gt;&quot;\r\n\t\t\t});\r\n\t\t&lt;?php\r\n\t\t}\r\n\t\t?&gt;\r\n\r\n\t\tvar map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), {\r\n\t\t\tzoom: 11,\r\n\t\t\tcenter: new google.maps.LatLng(&lt;?php echo $coords[&#039;center&#039;][&#039;lat&#039;] . &quot;,&quot; . $coords[&#039;center&#039;][&#039;lon&#039;]; ?&gt;),\r\n\t\t\tmapTypeId: google.maps.MapTypeId.ROADMAP\r\n\t\t});\r\n\r\n\t\tfor (var i = 0; i &lt; markers.length; i++) {\r\n\t\t\tnew google.maps.Marker({\r\n\t\t\t\tposition: new google.maps.LatLng(markers[i].lat, markers[i].lon), \r\n\t\t\t\tmap: map,\r\n\t\t\t\ttitle: markers[i].desc\r\n\t\t\t});   \r\n\t\t}\r\n\t}\r\n  \r\n  window.onload = init;\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;div id=&quot;map_canvas&quot;&gt;&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aufgabenstellung: Ich wei\u00df, wo ich mich befinde (Lat \/ Long, ist ja aus den Smartphones easy herauszubekommen) und habe einen Radius in km, in dem ich POI&#8217;s mit der Open Streemap API suchen m\u00f6chte. Problem: Die OSM API bietet keine &hellip; <a href=\"https:\/\/d-mueller.de\/blog\/umkreissuche-latlong-und-der-radius\/\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,3],"tags":[],"class_list":["post-617","post","type-post","status-publish","format-standard","hentry","category-php","category-webdev"],"_links":{"self":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts\/617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/comments?post=617"}],"version-history":[{"count":0,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts\/617\/revisions"}],"wp:attachment":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/media?parent=617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/categories?post=617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/tags?post=617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}