首页 > 其他分享> 文章详细

02、高德地图

2020-03-31 17:53:11 阅读：280 来源： 互联网

标签：02 map container function 地图中心点 var 高德

准备

1、登陆注册申请key值：

https://lbs.amap.com/api/webservice/guide/create-project/get-key

2、进入控制台应用管理，创建应用，添加key：

https://lbs.amap.com/dev/key/app

3、帮助文档：

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

创建地图

同步方式创建地图

//引入地图js
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e"></script>

//给地图的容器设置宽高
<style type="text/css">
#container{width: 100%;height: 600px;}
</style>

//需要引入地图的容器

//创建地图，并把地图引入id为container的容器
<script type="text/javascript">
new AMap.Map('container');
</script>

异步方式创建地图一

//创建地图，并把地图引入id为container的容器
<script>
window.init = function(){
　　new AMap.Map('container');
}
</script>

//引入地图js，并把js回调到上面init
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e&callback=init&callback=init"></script>

//创建地图，并把地图引入id为container的容器
<style type="text/css">
#container{width: 100%;height: 600px;}
</style>

//需要引入地图的容器
<div id="container"></div>

异步方式创建地图二

//页面结构加载后，创建地图，并把地图引入id为container的容器

window.onload = function(){
var map = new AMap.Map('container');
}

//引入地图js，并把js回调到上面onload

var url = 'https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e&callback=onload';

//创建script，并把url赋值给src属性
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;

//把生成的script添加到head标签后面
document.head.appendChild(jsapi);
</script>

地图初始配置

设置地图级别和中心点（初始化方式）

var map = new AMap.Map('container',{zoom:11,center:[120,30]});

查看地图级别/中心点

console.log(map.getZoom()); //查看地图当前的级别
console.log(map.getCenter().toString()); //查看地图当前中心点

设置地图级别/中心点（用户交互方式）

 //设置地图级别
 var jibie = document.getElementById('jibie');
 var queren = document.getElementById('queren');
 queren.onclick = function(){
 map.setZoom(jibie.value);   //获取文本框里面的数字级别
 <div id="cc">
 <input type="number" id="jibie" />
 <button type="button" id="queren">确认</button>
 </div>

//设置地图中心点
setTimeout(function(){
map.setCenter([122,33])
},5000)

//设置级别和中心点
setTimeout(function(){
map.setZoomAndCenter(11,[120,30])
},5000)

地图事件

//当地图移动后触发
map.on('moveend',function(){})  

//当地图级别发生改变后触发
map.on('zoomend',function(){})

查看当前中心点行政区

var cc = document.getElementById('cc');
map.on('moveend',function(){

map.getCity(function(info){
cc.innerText = "地图中心位置为：" + info.province + ' ' + info.city + ' ' + info.district;
console.log(info);
})

<div id="cc">
12345
</div>

设置当前中心点行政区

var que = document.getElementById('que');
var diqu = document.getElementById('diqu');
que.onclick = function(){
map.setCity(diqu.value );

<div id="xingzheng">
<input type="text" name="" id="diqu" />
<button id="que">确认设置</button>
</div>

标签：02,map,container,function,地图,中心点,var,高德
来源： https://www.cnblogs.com/mingliangge/p/12602202.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

02、高德地图

准备

创建地图

地图初始配置