文档章节

web移动端学习:高德地图demo(一)

d
 dxiya
发布于 01/17 23:30
字数 870
阅读 73
收藏 0
  1. 在高德地图开发中申请开发者资格,然后在控制台中新建应用,获得KEY;
  2. 新建模板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>

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

下面是一些自带的方法

  1. 地图设置行政区
map.getCity(funcyion(info){
	info  当前中心点的行政区
})
map.setCity('字符串');   //设置地区
  1. 地图范围
  • 获取地图的范围
getBonds().northeast //右上角的坐标
getBounds().southwest //左下角的坐标
  • 设置地图的范围
var myBounds = new AMap.Bounds//左下角坐标的数组,右上角坐标的数组
map.setBounds(myBounds) //但是不是特别精准,会以它觉得最好的方式去显示
  • 设定和清除显示范围
getBounds() //northeast.P / R  southwest.P / R
setLimitBounds() ;
clearLimitBounds();//清除设定的显示范围
  1. 平移
panBy(x,y)  //x代表向左平移多少像素  / y代表向上平移多少像素
panTo([x坐标,y坐标]) //地图会直接平移到这个位置
  1. 地址搜索+点击搜索结果跳转 加载插件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>

© 著作权归作者所有

d
粉丝 0
博文 3
码字总数 1907
作品 0
深圳
私信 提问
加载中

评论(0)

【高小爱课堂】_地图API开发者教程(全平台精华版)

一、使用须知 二、坐标相关问题 三、标注问题 四、定位相关问题 五、云图 六、地图API 1)Javascript API 2)Android API 3)iOS API 4)Windows Phone 及win8 API 5)URI API ▼使用须知 Q:...

高德LBS开放平台
2014/06/13
1.7K
0
Vue+Node+高德地图+Echart做一款出行可视化全栈webapp

咔咔出行(出行可视化) 项目简介 解决出行问题,用于出行行程记录,路线规划,数据可视化分析的移动端webapp 点击这里查看该项目 项目截图 私人出行 公共交通 历史列表 我的信息 技术栈 前端...

王文健
2019/06/08
0
0
高德地图sdk更新

在地图市场,高德地图占据了近三成的市场份额。高德人气颇高,在开发者服务方面也毫不含糊,又发布了新版本,那么新版本有哪些功能特色呢?以下是小编了解到的相关更新资讯。 高德地图iOS M...

devstore
2014/04/30
406
0
微信应用号开发必备技能都在这里了啦!

“微信应用号”就像平地里炸响的一声春雷,在互联网圈内炸开了锅,小代码小程序即将成为主流,H5迎来了自己的第二春。废话少说,关于微信应用号开发技能,你都掌握了吗? 没掌握的看这里,干...

咖啡
2016/09/23
0
0
重磅下载 | 6大技术方向 40+篇好文,高德如何做到日活过亿? - 知乎

简介: 回首2019 年,作为首个日活过亿的国民出行平台,高德地图 to C 和 to B 的用户数都再攀新高。在背后支撑和驱动业务快速发展的,正是数千名日夜奋战的高德技术人。现在《高德技术2019年...

我是程序员
01/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

00-Java 面试准备

面试之前 面试前准备简历需要注意的几个方面: 写简历、改简历,这个一定要干的。简历有两个作用,一个是吸引别人,能让别人邀请你去面试,这是前提;另一个是引导面试的人,让面试的人问你所...

源程序
今天
54
0
OSChina 周二乱弹 —— 大王(@罗马的王)颜值制霸Osc社区

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :Lunik的单曲《Seeing You Soar》 I hope you’re smiling,When seeing me soar. #今日歌曲推荐# 《Seeing You Soar》- Lunik 手...

小小编辑
今天
83
0
wordcount代码

1.写出map类 public class WCMapper extends Mapper<LongWritable,Text,Text,LongWritable>{ @Override protected void map(LongWritable key,Text value,Context context)throws IOExcepti......

七宝1
今天
59
0
Spring Batch 小任务(Tasklet)步骤

Chunk-Oriented Processing不是处理 step 的唯一方法。 考虑下面的一个场景,如果你仅仅需要调用一个存储过程,你可以在 ItemReader 中实现这个调用,然后在存储过程完成调用后返回 null。这...

honeymoose
今天
67
0
Linux日志分析

1. Linux日志文件的类型 2. 系统服务日志 2.1 syslogd的简介 2.2 syslogd的配置和使用 2.3 日志的安全性设置 2.4 远程日志记录服务 3. 日志的轮替 3.1 logrotate简介 3.2 logrotate的配置 3....

JiaMing
昨天
67
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部