实现根据地名出现百度地图

1、导入js文件:下载文件

 <script type="text/javascript" src="js/bdmapapi.js"></script> 

2、编写body

<input id="add" placeholder="请输入地点"><button onclick="getMap()">搜索</button>
<div id="container"></div>

3、调整style

<style type="text/css">	 
   #container{
	 height:500px;
	 width: 1000px;
	 margin-top:20px;
	 border:1px  solid  #DAD9D7;
  }
</style>

4、编写js,实现功能

<script type="text/javascript">
	    var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;
	    var point = new BMap.Point(120.2,30.25); //创建点坐标
	    map.centerAndZoom(point, 14);             //初始化地图,设置中心点坐标和地图级别
	    map.enableScrollWheelZoom();             //激活滚轮调整大小功能
	    var search1 = new BMap.LocalSearch("中国", {
	      onSearchComplete: function(result){
	        if (search1.getStatus() == BMAP_STATUS_SUCCESS){
	          var res = result.getPoi(0);
	          var point = res.point;
	          map.centerAndZoom(point, 11);
	        }
	      },renderOptions: { //结果呈现设置,
	        map: map,  
	        autoViewport: true,  
	        selectFirstResult: true 
	       },onInfoHtmlSet:function(poi,html){
            //标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。
	      } 
	    });
	    
	    
	    /* 地址查询 */
		  function getMap(){
			 search1.search(document.getElementById("add").value);
	      } 
		  		  
	</script>

5、效果图

6、查询结果(以“北京大学”为例)

修改百度地图返回的地址信息

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值