web移动端学习:高德地图demo（一）

在高德地图开发中申请开发者资格,然后在控制台中新建应用,获得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>

此时已经可以加载地图，后面逐渐增加功能。

下面是一些自带的方法

地图设置行政区

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);
			}
		}
	})
}
})

这时已经完成了一半，代码如下：

<!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>

来源：oschina

链接：https://my.oschina.net/u/3981685/blog/3159654

标签

autocomplete