效果图
效果:添加点标注-坐标搜索地址(逆地址解析)-形成一个范围圈-判断其余点是否在圈内
添加标注
// 获取坐标值
var latlon = $('.latlon').val().split(',');
// 添加点标注
var point = new BMap.Point(latlon[0], latlon[1]);
marker = new BMap.Marker(point);
map.addOverlay(marker);
地址解析
// 逆地址解析
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
// console.log(rs)
// 显示地址
$('.local').html(rs.address)
});
范围圈
// 获取圆半径
var r = $('.radius').val() * 1000;
// 创建以点为中心的圆
circle = new BMap.Circle(point,r,
{
strokeColor:"#e61623", //线颜色
strokeWeight:2, //线宽
fillColor:"#f18900", // 填充色
fillOpacity:'0.1', // 填充透明度
});
map.addOverlay(circle);
判断
// 显示圆范围内的点
for(var i = 0;i < points.length;i++){
var result = BMapLib.GeoUtils.isPointInCircle(points[i], circle);
if (result == true) {
circleMarker = new BMap.Marker(points[i]);
map.addOverlay(circleMarker);
}
}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的ak"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<title>地图展示</title>
</head>
<body>
<input type="text" name="" value="125.3333815941,43.9018671664" placeholder="输入坐标,例:125.3333815941,43.9018671664" class="latlon">
<button type="button" onclick="search()">搜索</button>
<select name="" class="radius">
<option value="10">10公里内</option>
<option value="20">20公里内</option>
</select>
当前位置:<span class="local"></span>
<div id="allmap"></div>
</body>
</html>
<script src="http://www.jq22.com/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(125.3333815941, 43.9018671664), 12); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("吉林"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// 点 坐标
var points = [
new BMap.Point(125.2742200750, 43.9148113393),
new BMap.Point(125.2563399144, 43.9652697507),
new BMap.Point(125.2055261923, 43.9944885503)
];
var circleMarker, // 圆内点
circle, // 圆
marker; // 搜索点
// 搜索按钮点击
function search(){
// 清除所有覆盖物
map.clearOverlays();
// 获取坐标值
var latlon = $('.latlon').val().split(',');
// 添加点标注
var point = new BMap.Point(latlon[0], latlon[1]);
marker = new BMap.Marker(point);
map.addOverlay(marker);
// 设置中心点
map.setCenter(point)
// 逆地址解析
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
// console.log(rs)
$('.local').html(rs.address)
});
// 获取圆半径
var r = $('.radius').val() * 1000;
// 创建以点为中心的圆
circle = new BMap.Circle(point,r,
{
strokeColor:"#e61623", //线颜色
strokeWeight:2, //线宽
fillColor:"#f18900", // 填充色
fillOpacity:'0.1', // 填充透明度
});
map.addOverlay(circle);
// 显示圆范围内的点
for(var i = 0;i < points.length;i++){
var result = BMapLib.GeoUtils.isPointInCircle(points[i], circle);
if (result == true) {
circleMarker = new BMap.Marker(points[i]);
map.addOverlay(circleMarker);
}
}
}
$('.radius').change(function(){
search()
});
// 地图个性化样式
var styleJson = [{
"featureType": "land",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#e9e9e7ff"
}
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#7ab5ddff"
}
}, {
"featureType": "green",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#0d50a1ff"
}
}, {
"featureType": "building",
"elementType": "geometry",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "building",
"elementType": "geometry.fill",
"stylers": {
"color": "#ffffffb3"
}
}, {
"featureType": "building",
"elementType": "geometry.stroke",
"stylers": {
"color": "#dadadab3"
}
}, {
"featureType": "subwaystation",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#b15454B2"
}
}, {
"featureType": "education",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#e4f1f1ff"
}
}, {
"featureType": "medical",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#f0dedeff"
}
}, {
"featureType": "scenicspots",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#e2efe5ff"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"weight": 4
}
}, {
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#f7c54dff"
}
}, {
"featureType": "highway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#fed669ff"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "highway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#8f5a33ff"
}
}, {
"featureType": "highway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "highway",
"elementType": "labels.icon",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"weight": 2
}
}, {
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#d8d8d8ff"
}
}, {
"featureType": "arterial",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffeebbff"
}
}, {
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "arterial",
"elementType": "labels.text.fill",
"stylers": {
"color": "#525355ff"
}
}, {
"featureType": "arterial",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "local",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"weight": 1
}
}, {
"featureType": "local",
"elementType": "geometry.fill",
"stylers": {
"color": "#d8d8d8ff"
}
}, {
"featureType": "local",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "local",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "local",
"elementType": "labels.text.fill",
"stylers": {
"color": "#979c9aff"
}
}, {
"featureType": "local",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "railway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"weight": 1
}
}, {
"featureType": "railway",
"elementType": "geometry.fill",
"stylers": {
"color": "#949494ff"
}
}, {
"featureType": "railway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"weight": 1
}
}, {
"featureType": "subway",
"elementType": "geometry.fill",
"stylers": {
"color": "#d8d8d8ff"
}
}, {
"featureType": "subway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "subway",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "subway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#979c9aff"
}
}, {
"featureType": "subway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "continent",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "continent",
"elementType": "labels.icon",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "continent",
"elementType": "labels.text.fill",
"stylers": {
"color": "#333333ff"
}
}, {
"featureType": "continent",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "city",
"elementType": "labels.icon",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "city",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "city",
"elementType": "labels.text.fill",
"stylers": {
"color": "#454d50ff"
}
}, {
"featureType": "city",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "town",
"elementType": "labels.icon",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "town",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "town",
"elementType": "labels.text.fill",
"stylers": {
"color": "#454d50ff"
}
}, {
"featureType": "town",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": {
"color": "#a0c6f3ff"
}
}, {
"featureType": "poilabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poilabel",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "poilabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#428ee9ff"
}
}, {
"featureType": "districtlabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
"color": "#7ab5ddff"
}
}]
map.setMapStyleV2({styleJson:styleJson});
</script>