Réalisez l'apparence de la carte Baidu en fonction des noms de lieux

1. Importer un fichier js: télécharger le fichier

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

2. Écrivez le corps

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

3. Ajustez le style

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

4. Écrivez js pour réaliser la fonction

<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. Image d'effet

6. Résultats de la requête (prenez "l'Université de Pékin" comme exemple)

 

Publié 77 articles originaux · 100 likes · 70,000+ vues

Je suppose que tu aimes

Origine blog.csdn.net/super_DuoLa/article/details/105049427
conseillé
Classement