Map jQuery/Google地图：带半径控制的位置选择器？
我正在寻找一种简单的用户友好的方法来选择一个位置，通过获得横向/纵向位置以及影响半径 我在谷歌广告中选择广告显示区域时也看到过类似的情况。我想知道有没有jQuery/google解决方案？或者你见过类似的我可以实现的东西吗 我只需要一个中心（长/宽）和半径Map jQuery/Google地图：带半径控制的位置选择器？,map,geolocation,location,Map,Geolocation,Location,我正在寻找一种简单的用户友好的方法来选择一个位置，通过获得横向/纵向位置以及影响半径 我在谷歌广告中选择广告显示区域时也看到过类似的情况。我想知道有没有jQuery/google解决方案？或者你见过类似的我可以实现的东西吗 我只需要一个中心（长/宽）和半径 另外，这是为英国准备的。我决定这样做： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-s
另外，这是为英国准备的。我决定这样做：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TITLE -->
<title>Website Title</title>
<!-- META -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- JAVASCRIPT -->
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var Circle = null;
var Radius = $("#radius").val();
var StartPosition = new google.maps.LatLng(54.19335, -3.92695);
function DrawCircle(Map, Center, Radius) {
if (Circle != null) {
Circle.setMap(null);
}
if(Radius > 0) {
Radius *= 1609.344;
Circle = new google.maps.Circle({
center: Center,
radius: Radius,
strokeColor: "#0000FF",
strokeOpacity: 0.35,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.20,
map: Map
});
}
}
function SetPosition(Location, Viewport) {
Marker.setPosition(Location);
if(Viewport){
Map.fitBounds(Viewport);
Map.setZoom(map.getZoom() + 2);
}
else {
Map.panTo(Location);
}
Radius = $("#radius").val();
DrawCircle(Map, Location, Radius);
$("#latitude").val(Location.lat().toFixed(5));
$("#longitude").val(Location.lng().toFixed(5));
}
var MapOptions = {
zoom: 5,
center: StartPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
disableDoubleClickZoom: true,
streetViewControl: false
};
var MapView = $("#map");
var Map = new google.maps.Map(MapView.get(0), MapOptions);
var Marker = new google.maps.Marker({
position: StartPosition,
map: Map,
title: "Drag Me",
draggable: true
});
google.maps.event.addListener(Marker, "dragend", function(event) {
SetPosition(Marker.position);
});
$("#radius").keyup(function(){
google.maps.event.trigger(Marker, "dragend");
});
DrawCircle(Map, StartPosition, Radius);
SetPosition(Marker.position);
});
</script>
</head>
<body>
<form>
Latitude: <input type="text" id="latitude" /> Longitude: <input type="text" id="longitude" />
Radius: <input type="text" id="radius" value="320" />
<div id="map" style="width:600px; height:400px; background-color:#000000;">
</div>
</form>
</body>
</html>
网站标题
$（文档）.ready（函数（）{
var循环=空；
变量半径=$（“#半径”）.val（）；
var StartPosition=new google.maps.LatLng（54.19335，-3.92695）；
功能绘图圆（地图、中心、半径）{
如果（圆圈！=null）{
Circle.setMap（空）；
}
如果（半径>0）{
半径*=1609.344；
圆圈=新的google.maps.Circle({
中心:中心,，
半径：半径，
strokeColor:#0000FF“，
笔划不透明度：0.35，
冲程重量：2，
fillColor:#0000FF“，
不透明度：0.20，
地图：地图
});
}
}
函数设置位置（位置、视口）{
标记器。设置位置（位置）；
如果（视口）{
地图边界（视口）；
Map.setZoom（Map.getZoom（）+2）；
}
否则{
panTo地图（位置）；
}
半径=$（“#半径”）.val（）；
绘图圈（地图、位置、半径）；
$（“#纬度”）.val（Location.lat（）.toFixed（5））；
$（“#经度”）.val（Location.lng（）.toFixed（5））；
}
变量映射选项={
缩放：5，
中心：起始位置，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
禁用双击缩放：真，
街景控制：错误
};
var MapView=$（“#映射”）；
var Map=new google.maps.Map（MapView.get（0），MapOptions）；
var Marker=new google.maps.Marker({
位置：起始位置，
地图：地图，
标题：“拖我走”，
德拉格布尔：是的
});
google.maps.event.addListener（标记“dragend”，函数（事件）{
设置位置（标记位置）；
});
$（“#半径”）.keyup（函数（）{
google.maps.event.trigger（标记“dragend”）；
});
绘制圆（地图、起始位置、半径）；
设置位置（标记位置）；
});
纬度：经度：
半径：