百度地图显示一定范围内的点

最新推荐文章于 2022-07-20 07:00:00 发布

菜鸟技巧汇总

最新推荐文章于 2022-07-20 07:00:00 发布

阅读量2.2k

点赞数

分类专栏： html js

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/guoxiaoweitaiyuan/article/details/49364801

版权

html js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

直接上代码，不废话。

<!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=1.2&ak=6c497f51c06477544e5fa6e9bd68f7c3"></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="button" value="查询'" οnclick="a()"/>
	<div id="allmap"></div>
    
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	var point = new BMap.Point(110.317351, 35.613984);//地图原点
	map.centerAndZoom(point, 5);
	//map.enableScrollWheelZoom();
	map.enableScrollWheelZoom(true);
    //申明一个坐标
	var point = new BMap.Point(112.573913, 37.859013);
    //声明点
	var point1 = new BMap.Point(112.546317,37.819801);
	var point2 = new BMap.Point(122.546317, 37.819801);
	

	var marker1 = new BMap.Marker(point1);
	var marker2 = new BMap.Marker(point2);
    //画个圆
	var circle = new BMap.Circle(point, 30000, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆

    //加载
	map.addOverlay(circle);
	map.addOverlay(marker1);
	map.addOverlay(marker2);

	function a() {
	 
	    map.clearOverlays();
	    var result = BMapLib.GeoUtils.isPointInCircle(point1, circle);
	    map.addOverlay(circle);
	    if (result == true) {
	      
	        map.addOverlay(marker1);
	    }
	    var result1 = BMapLib.GeoUtils.isPointInCircle(point2, circle);
	    if (result1 == true) {
	        map.addOverlay(marker2);
	    }
	}
</script>