web移動端學習:高德地圖demo（一）

時間 2020-01-18

標籤 web 移動學習地圖 demo 欄目 HTML 简体版

原文原文鏈接

在高德地圖開發中申請開發者資格,而後在控制檯中新建應用,得到KEY;
新建模板HTML文件;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>地圖demo</title>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申請到的KEY"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		#container {width:100%; height:100%;position: absolute; 
			left: 0;top: 0;}
	</style>
</head>
<body>
	<div id="container"></div>
	<script type="text/javascript">
		var map = new AMap.Map('container',{
			zoom:12 ,
			center:[114.05,22.5]//深圳
		});

	map.on('moveend',function(){
		console.log(map.getCenter().toString());
	})
	map.on('zoomend',function(){
		console.log(map.getZoom());
	})
	</script>
</body>
</html>

此時已經能夠加載地圖，後面逐漸增長功能。javascript

下面是一些自帶的方法css

地圖設置行政區

map.getCity(funcyion(info){
	info  當前中心點的行政區
})

map.setCity('字符串');   //設置地區

地圖範圍

獲取地圖的範圍

getBonds().northeast //右上角的座標
getBounds().southwest //左下角的座標

設置地圖的範圍

var myBounds = new AMap.Bounds//左下角座標的數組，右上角座標的數組
map.setBounds(myBounds) //可是不是特別精準，會以它以爲最好的方式去顯示

設定和清除顯示範圍

getBounds() //northeast.P / R  southwest.P / R
setLimitBounds() ;

clearLimitBounds();//清除設定的顯示範圍

平移

panBy(x,y)  //x表明向左平移多少像素  / y表明向上平移多少像素
panTo([x座標，y座標]) //地圖會直接平移到這個位置

地址搜索+點擊搜索結果跳轉加載插件Autocomplete，調用search（）方法

AMap.plugin('AMap.Autocomplete',function(){
	sinput.oninput = function(){
		node.innerHTML = '';//清空地點提示
		if (this.value == '') {
			return;
		}
	new AMap.Autocomplete().search(this.value,function(status,data){
		for(var i = 0;i < data.tips.length;i++){
		//console.log(data.tips);
		var oLi = document.createElement('li');
		oLi.innerHTML = data.tips[i].name;
		oLi.P = data.tips[i].location.P;
		oLi.Q = data.tips[i].location.Q;
		nodeappendChild(oLi);
//點擊跳轉
		oLi.onclick = function(){
		map.setCenter([this.Q,this.P]);
		map.setZoom(16);
			}
		}
	})
}
})

這時已經完成了一半，代碼以下：html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>地圖demo</title>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的KEY"></script>
	<style type="text/css"> 
		*{
			margin: 0;
			padding: 0;
		}
		#container {
			width:100%; 
			height:100%;
			position: absolute; 
			left: 0;
			top: 0;
		}
		.tiaozhuan{
			width: 90px;
			margin-right: 2px;
			float: left;
		}
		#panel{
            position: fixed;
            background: white;
            top: 10px;
            right: 10px;
            width: 280px;
            height: 200px;
        }

        #setCenterNode{
        	width: 200px;
        	height: 80px;
        	position:absolute;
        	top: 10px;
        	right: 20px;
        	z-index: 99;
        	border: 1px solid black;
        	box-shadow: 0 0 5px black;
        	background: white;
        	padding: 20px;
        }

        #search{
        	width: 200px;
        	height: 50px;
        	z-index: 99;
        	position: relative;
        	top: 20px;
        	right: 20px;
        	border: 1px solid black;
        	box-shadow: 0 0 5px black;
        	background: white;
        	padding: 5px 20px;
        	display: block;
        	align-items: center;
        }
        .searchinput{
			width: 140px;
			height: 30px;
        }
        ul{
        	background: white;
        	list-style: none;
        }
        /*#btn2{
        	background: blue;
        	color: white;
        	width: 40px;
        	height: 32px;
        	font-size: 15px;
        	border: 0;
        	box-shadow: 1px 1px 2px black;
        }*/
	</style>
</head>
<body>
	<div id="container"></div>
	<div id="setCenterNode">
		<h3 id="city">正在獲取所在地區...</h3>
		<h4>經緯度跳轉：</h4>
		<input type="" name="" id="xNode" class="tiaozhuan">
		<input type="" name="" id="yNode" class="tiaozhuan">
		<button id="btn">肯定</button>

		<div id="search">
			<input type="" name="" id="sinput" class="searchinput">
			<!--<button id="btn2" >搜索</button>-->
			<ul id="node"></ul>
		</div>
	</div>
	
	<script type="text/javascript">
		var map = new AMap.Map('container',{
			zoom:14 ,
			center:[114.069312,22.577293],
			resizeEnable:true
		});

	//加載插件(未完善)
	AMap.plugin('AMap.Autocomplete',function(){
		sinput.oninput = function(){
			node.innerHTML = '';//清空地點提示
			if (this.value == '') {
				return;
			}
			new AMap.Autocomplete().search(this.value,function(status,data){
				for(var i = 0;i < data.tips.length;i++){
					//console.log(data.tips);
					var oLi = document.createElement('li');
					oLi.innerHTML = data.tips[i].name;
					oLi.P = data.tips[i].location.P;
					oLi.Q = data.tips[i].location.Q;
					node.appendChild(oLi);

					oLi.onclick = function(){
						map.setCenter([this.Q,this.P]);
						map.setZoom(16);
					}
				}
			})
		}
	})
	//點擊按鈕跳轉
	btn.onclick = function(){
            map.setCenter([xNode.value,yNode.value]);
        };
    //顯示所在省份/地區
    map.getCity(function(info){
    	console.log(info);
		city.innerHTML = info.province+','+info.district
    })
	//改變中心點
	map.on('moveend',function(){
		map.getCity(function(info){
			//console.log(info);
			city.innerHTML = info.province+','+info.city+','+info.district
		});
		console.log(map.getCenter().toString());
	})
	//改變地圖顯示級別
	map.on('zoomend',function(){
		console.log(map.getZoom());
	})
	//容器改變
	map.on('resize',function(){
            console.log('容器大小改變中');
        });
	</script>
</body>
</html>