本文介绍了Google地图 - 邮政编码制图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在努力寻找有关如何在Google地图中实现此效果的最新相关信息。我希望有人知道这个问题比我更多，并可能指向正确的方向。
问题：
- 我需要通过邮政编码在地图上绘制X个销钉量。第二步是输入我自己的邮政编码并产生第一步绘制的最近5个邮政编码列表。
解决方案
此代码会告诉您与您在框中输入的邮政编码。我确信从这里你可以调整它以得到前5名的结果。
我可以修改：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google Maps JavaScript API v3示例：地理编码简单< / title>
< link href =http://code.google.com/apis/maps/documentation/javascript/examples/standard.css =stylesheettype =text / css/>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
var geocoder;
var map;
var markers = [];
函数initialize（）{
geocoder = new google.maps.Geocoder（）;
var latlng = new google.maps.LatLng（40.768505，-111.853244）;
var myOptions = {
zoom：8，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map = new google .maps.Map（document.getElementById（map_canvas），myOptions）;
addPostCode（'84101'）;
addPostCode（'84102'）;
addPostCode（'84103'）;
addPostCode（'84104'）;
addPostCode（'84105'）;
$ b $函数addPostCode（zip）{
geocoder.geocode（{'address'：zip}，function（results，status）{
if（status = = google.maps.GeocoderStatus.OK）
{
map.setCenter（results [0] .geometry.location）;
var marker = new google.maps.Marker（{
map：map，
position：results [0] .geometry.location，
name：zip
}）;
markers.push（marker）;
} else {
alert（由于以下原因Geocode不成功：+ status;
}
}）;
}
函数checkZip（zip）
{
var distance = Number.MAX_VALUE;
var index = 0;
geocoder.geocode（{'address'：zip}，function（results，status）
{
if（status == google.maps.GeocoderStatus.OK）
{
for（ix = 0; ix {
var tmp = getDistance（results [0] .geometry.location，markers [ix] .position）;
if（tmp {
distance = tmp;
index = ix;
}
}
alert（'nearest zipcode is ：'+ markers [index] .name）;
}
}）;
}
函数getDistance（latlng1，latlng2）
{
var R = 6371; //以公里为单位的地球半径
var dLat =（latlng2.lat（） - latlng1.lat（））* Math.PI / 180; //以弧度表示的Javascript函数
var dLon =（latlng2.lng（） - latlng1.lng（））* Math.PI / 180;
var a = Math.sin（dLat / 2）* Math.sin（dLat / 2）+
Math.cos（latlng1.lat（）* Math.PI / 180）* Math.cos latlng2.lat（）* Math.PI / 180）*
Math.sin（dLon / 2）* Math.sin（dLon / 2）;
var c = 2 * Math.atan2（Math.sqrt（a），Math.sqrt（1-a））;
var d = R * c; //以公里为单位的距离
d = d * 0.621371192; //转换为英里
返回d;
}
< / script>
< / head>
< body onload =initialize（）>
< div>
< input id =addresstype =textboxvalue =>
< input type =buttonvalue =Geocodeonclick =checkZip（getElementById（'address'）。value）>
< / div>
< div id =map_canvasstyle =height：90％>< / div>
< / body>
< / html>
I'm struggling to find any up to date relevant information on how to achieve this effect in google maps. I was hoping someone knows more than me on the subject and could point me in the correct direction..
The problem:
- I need to plot X amount of pins on a map via a postcode.
- The second step is to enter my own postcode and product a list of the closest 5 postcodes plotted in step one.
解决方案
This code will tell you the single closest zipcode to the one you enter in the box. I'm sure from here you can adapt it to give the top 5 results.
I was able to adapt the Geocoding sample code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var markers = [];
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.768505,-111.853244);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addPostCode('84101');
addPostCode('84102');
addPostCode('84103');
addPostCode('84104');
addPostCode('84105');
}
function addPostCode(zip) {
geocoder.geocode( { 'address': zip}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
name: zip
});
markers.push(marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function checkZip(zip)
{
var distance = Number.MAX_VALUE;
var index = 0;
geocoder.geocode( { 'address': zip}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
for(ix=0; ix< markers.length; ix++)
{
var tmp = getDistance(results[0].geometry.location, markers[ix].position);
if (tmp < distance)
{
distance = tmp;
index = ix;
}
}
alert('nearest zipcode is :' + markers[index].name);
}
});
}
function getDistance(latlng1, latlng2)
{
var R = 6371; // Radius of the earth in km
var dLat = (latlng2.lat()-latlng1.lat()) * Math.PI / 180; // Javascript functions in radians
var dLon = (latlng2.lng()-latlng1.lng()) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(latlng1.lat() * Math.PI / 180) * Math.cos(latlng2.lat() * Math.PI / 180) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; // Distance in km
d = d * 0.621371192; // convert to miles
return d;
}
</script>
</head>
<body onload="initialize()">
<div>
<input id="address" type="textbox" value="">
<input type="button" value="Geocode" onclick="checkZip(getElementById('address').value)">
</div>
<div id="map_canvas" style="height:90%"></div>
</body>
</html>
这篇关于Google地图 - 邮政编码制图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！