javascript – 谷歌地图 – 邮政编码

前端之家收集整理的这篇文章主要介绍了javascript – 谷歌地图 – 邮政编码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我很难找到有关如何在谷歌地图中实现此效果的最新相关信息.我希望有人在这个问题上比我更了解,并指出我正确的方向..

问题:

>我需要通过邮政编码在地图上绘制X量的针脚.
>第二步是输入我自己的邮政编码并生成第一步中绘制的最接近的5个邮政编码的列表.

解决方法

代码将告诉您最接近您在框中输入的邮政编码.我相信你可以从这里调整它以获得前5名的成绩.

我能够适应Geocoding sample code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <Meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>
  5. <Meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  6. <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
  7. <link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
  8. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  9. <script type="text/javascript">
  10. var geocoder;
  11. var map;
  12. var markers = [];
  13. function initialize() {
  14. geocoder = new google.maps.Geocoder();
  15. var latlng = new google.maps.LatLng(40.768505,-111.853244);
  16. var myOptions = {
  17. zoom: 8,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP
  18. }
  19. map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  20. addPostCode('84101');
  21. addPostCode('84102');
  22. addPostCode('84103');
  23. addPostCode('84104');
  24. addPostCode('84105');
  25. }
  26.  
  27. function addPostCode(zip) {
  28. geocoder.geocode( { 'address': zip},function(results,status) {
  29. if (status == google.maps.GeocoderStatus.OK)
  30. {
  31. map.setCenter(results[0].geometry.location);
  32. var marker = new google.maps.Marker({
  33. map: map,position: results[0].geometry.location,name: zip
  34. });
  35. markers.push(marker);
  36. } else {
  37. alert("Geocode was not successful for the following reason: " + status);
  38. }
  39. });
  40. }
  41.  
  42. function checkZip(zip)
  43. {
  44. var distance = Number.MAX_VALUE;
  45. var index = 0;
  46. geocoder.geocode( { 'address': zip},status)
  47. {
  48. if (status == google.maps.GeocoderStatus.OK)
  49. {
  50. for(ix=0; ix< markers.length; ix++)
  51. {
  52. var tmp = getDistance(results[0].geometry.location,markers[ix].position);
  53. if (tmp < distance)
  54. {
  55. distance = tmp;
  56. index = ix;
  57. }
  58. }
  59. alert('nearest zipcode is :' + markers[index].name);
  60. }
  61. });
  62. }
  63.  
  64. function getDistance(latlng1,latlng2)
  65. {
  66. var R = 6371; // Radius of the earth in km
  67. var dLat = (latlng2.lat()-latlng1.lat()) * Math.PI / 180; // Javascript functions in radians
  68. var dLon = (latlng2.lng()-latlng1.lng()) * Math.PI / 180;
  69. var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
  70. Math.cos(latlng1.lat() * Math.PI / 180) * Math.cos(latlng2.lat() * Math.PI / 180) *
  71. Math.sin(dLon/2) * Math.sin(dLon/2);
  72. var c = 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a));
  73. var d = R * c; // Distance in km
  74. d = d * 0.621371192; // convert to miles
  75. return d;
  76. }
  77. </script>
  78. </head>
  79. <body onload="initialize()">
  80. <div>
  81. <input id="address" type="textBox" value="">
  82. <input type="button" value="Geocode" onclick="checkZip(getElementById('address').value)">
  83. </div>
  84. <div id="map_canvas" style="height:90%"></div>
  85. </body>
  86. </html>

猜你在找的JavaScript相关文章