- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一组 2 个预定义位置,根据用户输入的邮政编码,我需要显示最近的位置。
到目前为止,我已经使用邮政编码搜索了用户输入位置:
$("form#zipcodeSearch").on("submit", function(event){
event.preventDefault();
var jsonUrl = 'http://maps.googleapis.com/maps/api/geocode/json?address='+$("input#zipcode").val();
$.ajax({
type: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'text/plain'
},
dataType: "json",
url: jsonUrl,
success: function (data) {
var lat = (data.results[0].geometry.bounds.northeast.lat + data.results[0].geometry.bounds.southwest.lat) / 2;
var lng = (data.results[0].geometry.bounds.northeast.lng + data.results[0].geometry.bounds.southwest.lng) / 2;
initialize(lat, lng);
}
});
});
var map;
function initialize(lat, lng) {
var mapOptions = {
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(lat, lng);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: '<div style="width: 75px">You are here!</div>'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
}, {
enableHighAccuracy: true
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: arial;
font-size: 62.5%; /* so, 10px = 1rem */
}
#map-canvas{
z-index: -1;
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<form id="zipcodeSearch">
<input type="text" id="zipcode" placeholder="Enter Zipcode"/>
<input type="submit" value="Search" />
</form>
<div id="map-canvas"></div>
关于如何实现这一点有什么想法吗?如果 JS API 无法实现,是否有任何其他 API 可以帮助我实现这一目标?
最佳答案
更新:
对 Google Maps Platform 的无 key 访问现已弃用。您的所有 API 调用都需要一个 API key ,以避免服务中断。更多详情请引用http://g.co/dev/maps-no-account
原答案:
我能够通过以下方式解决这个问题:
google.maps.geometry.spherical.computeDistanceBetween()
google.maps.LatLngBounds()
调整缩放比例,使 map 包含输入邮政编码的位置和最近的搜索位置。这是一个演示。 H 图标代表输入的邮政编码位置,C 图标代表搜索到的最近的位置。 (目前,我只保留了 2 个预定义位置)。
var predefinedLocations = [{
"name": "Brookwood Medical Center",
"lat": 33.4636415,
"lng": -86.7771671
},
{
"name": "Lutheran Medical Center",
"lat": 40.646872,
"lng": -74.020892
}
];
$("form#zipcodeSearch").on("submit", function(event) {
event.preventDefault();
var jsonUrl = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + $("input#zipcode").val();
$.ajax({
type: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'text/plain'
},
dataType: "json",
url: jsonUrl,
success: function(data) {
var lat = (data.results[0].geometry.bounds.northeast.lat + data.results[0].geometry.bounds.southwest.lat) / 2;
var lng = (data.results[0].geometry.bounds.northeast.lng + data.results[0].geometry.bounds.southwest.lng) / 2;
var p1, p2;
predefinedLocations.forEach(function(obj) {
p1 = new google.maps.LatLng(obj.lat, obj.lng);
p2 = new google.maps.LatLng(lat, lng);
obj.distance = calcDistance(p1, p2);
});
// sort by distance
var locationInfo = predefinedLocations.sort(compare);
//console.log('locationInfo', locationInfo);
initializeGoogleMap(locationInfo, lat, lng);
}
});
});
var map;
function initializeGoogleMap(locationInfo, lat, lng) {
var mapOptions = {
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// zoom to only the input zipcode and closest location
var latlngbounds = new google.maps.LatLngBounds();
latlngbounds.extend(new google.maps.LatLng(locationInfo[0].lat, locationInfo[0].lng));
latlngbounds.extend(new google.maps.LatLng(lat, lng));
map.fitBounds(latlngbounds);
var infowindow = new google.maps.InfoWindow();
var marker, i;
// set marker for input location
setMarker(lat, lng, map, 'http://www.lsac.org/images/default-source/mainportalimages/icon-h-grey-bg.jpg?sfvrsn=2', "You are here!", i, infowindow);
// set marker for closest location
setMarker(locationInfo[0].lat, locationInfo[0].lng, map, 'http://alert.mta.info/sites/all/themes/mta/images/subway_bullets/c.png', locationInfo[0].name, i, infowindow);
for (var j = 1; j < locationInfo.length; j++) {
// set marker for other location
setMarker(locationInfo[j].lat, locationInfo[j].lng, map, '', locationInfo[j].name, i, infowindow);
}
}
function calcDistance(p1, p2) {
return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
}
function compare(a, b) {
if (parseFloat(a.distance) < parseFloat(b.distance)) {
return -1;
}
if (parseFloat(a.distance) > parseFloat(b.distance)) {
return 1;
}
return 0;
}
function setMarker(lat, lng, map, icon, content, i, infowindow) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
icon: icon
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, i));
}
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
/* so, 10px = 1rem */
}
body {
font-family: arial;
}
#map-canvas {
z-index: -1;
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
<form id="zipcodeSearch">
<input type="text" id="zipcode" placeholder="Enter zipcode here" />
<input type="submit" value="Search" />
</form>
<div id="map-canvas"></div>
jsFiddle version of the same code
我希望这个答案能帮助遇到与我相同问题的人。
关于javascript - 使用 Google Maps Javascript API 从一组预定义位置获取最近的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28229673/
我对我接管的项目有疑问。我正在转换其他人编写的 MS Access 应用程序并将其转换为 MySQL/PHP Web 应用程序。其中大部分已经完成,但是,当涉及到此应用程序的调度部分时,我处于停滞状态
我有一个带有 @Scheduled 注释的方法。此方法包含长时间运行、昂贵的操作。我担心当计划的方法开始运行时应用程序会变慢。有什么办法可以为预定方法分配优先级吗?在 Spring 中启动低优先级后台
我的大学有一个预订项目房间的网站;但除非你很幸运或者半夜醒着,否则要订到房间并不容易。因此,我编写了一个 JS 片段来填写所有必要的字段并提交表单。 但是我如何自动化这个过程呢? 我的目的基本上是加载
我正在评估处理大量排队消息的可能解决方案,这些消息必须在特定日期和时间交付给工作人员。执行它们的结果主要是对存储数据的更新,它们最初可能是也可能不是由用户操作触发的。 例如,想想你在一个假设的大型星际
@Scheduled documentation here声明 fixedRateString值可以是 the delay in milliseconds as a String value, e.g
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文回答问题. 4年前关闭。 Improve t
我有一个有趣的情况。我解析了几个新闻发布网站,想通过调度程序将它们保存到数据库中。但是保存时出现错误。由于交易后写条件 described here . 我的模型类是 @Entity @Table(n
我正在阅读 Java Concurrency in Practice 并遇到以下代码片段。 public static void timedRun(final Runnable r,
使用 Azure 数据工厂,是否可以对驻留在 Azure SQL 数据库中的多个(不是全部)表中的所有行执行预定的 1:1 复制/克隆到另一个 Azure SQL 数据库(在本例中为 Azure SQ
我是一名优秀的程序员,十分优秀!