我是看网站上的看出来的 大家也可以看一下 网址：http://lbsyun.baidu.com/jsdemo.htm#i3_2
我可以把我的例子给大家看，还有就是密钥在哪里获取呢？在百度地图API中获取。链接为：http://lbsyun.baidu.com/
JavaScript API，然后创建应用，浏览器端或者服务器端，我的是浏览器端，用哪个就创建哪个，然后创建好了之后，认证，哪个场景的就按自己想法填，实在不知道写啥，就写需要用这个干啥，因为字数限制，不能少于一百字，你就使劲的舔百度地图，然后确认，正常情况下1-3天就通过了。
HTML
<div class="main">
<div id="l-map"></div>
<div class="right">
<div class="fenlei">
<ul class="clearfix">
<li>交通</li>
<li>学校</li>
<li>商场</li>
<li>医疗</li>
<li>餐饮</li>
</ul>
</div>
<div id="r-result"></div>
</div>
</div>
CSS
body, html{width: 100%;height: 100%;font-family:"微软雅黑";}
#l-map{height:400px;width:890px;float: left;}
#r-result{width:308px;height:360px;overflow-y:scroll;margin-top: 40px}
*{
margin: 0 auto;
padding:0;
}
ul{
width: 308px;
height: 40px;
background: #ccc;
margin: 0 auto
}
ul li{
float: left;
list-style: none;
width: 40px;
line-height: 40px;
padding-left: 21px
}
ul li:hover{
background: #fff
}
.fenlei{
float: right
}
.clearfix{
content: '';
display: block;
clear: both;
}
.main{
width: 1200px;
position: relative;
height: 400px;
margin-top: 50px
}
.right{
float: right;
width: 308px;
height:400px;
border: 1px solid #ccc
}
SCRIPT
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
//这个是引入的jQuery
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("l-map"); // 创建Map实例
// map.centerAndZoom(new BMap.Point(117.173402,31.858478), 11);
//map.centerAndZoom方法创建地图，第一个参数可以是根据之前创建好的一个点为中心，创建出地图，也可以根据城市地区的中文名称创建地图，第二个参数是地图缩放级别，最大为19，最小为0。（但实际当缩小到3的时候就已经。。。）
var mPoint = new BMap.Point(117.173402,31.858478)
//获取经纬度的，如果你想要哪个地方用百度地图显示出来，就添加那个地方的经纬度坐标
map.enableScrollWheelZoom();
//设置地图利用鼠标滚轮控制大小
map.centerAndZoom(mPoint,15);
var circle = new BMap.Circle(mPoint,1500,{fillColor:'blue', strokeWeight: 1 ,fillOpacity: 0.1, strokeOpacity: 0.5});
//设置范围，后面大括号中是给圆设置样式，自己看
map.addOverlay(circle);
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "r-result",autoViewport:false}
});
$("li").each(function (index,item) {
$(item).click(function () {
var guanjianci = $(this).text();
local.searchNearby(guanjianci,mPoint,1500);
})
});
</script>
网友评论