成果真的很好很强大，，有图有证据！

<script type="text/javascript" src="http://www.mamicode.com/https:/webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e"></script>

3.有个div容器
4.创建舆图 new AMap.Map(‘容器的名字‘)；

初始化舆图（默认设置）

<div></div> <script type="text/javascript"> new AMap.Map(‘container‘); </script>

初始化舆图（简单自界说设置）

var map = new AMap.Map(‘container‘,{ zoom:16, center:[116.379391,39.861536], });

getZoom() 获取舆图的级别
getCenter(); 获取舆图的中心位置

Zoom 的数字越大 显示的越精细 越小显示的范畴越大
setZoom 可以手动去设定舆图级别

map.setZoom(15);

setCenter([]) 设置中心点，放入 坐标

map.setCenter([121.222,30]);

中心点和层级一起设定

map.setZoomAndCenter(12,[121.22,30])

获取级别和中心点

console.log(map.getZoom()); console.log(map.getCenter().toString());

on(‘moveend‘) //舆图移动结束时
on(‘zoomend‘) //舆图级别产生转变时

获取行政区
map.getCity(function(info){
info 当前中心点的行政区
});

map.getCity(function(info){ setCenterNode.innerHTML = info.province+‘,‘+info.district });

设置行政区

map.setCity(‘字符串‘) 想让舆图达到该地区的中心点 map.setCity(‘天津市‘);

获取舆图的范畴

console.log(map.getBounds().northeast.toString());//右上角的坐标 console.log(map.getBounds().southwest.toString());//左下角的坐标

通过事件来设定显示限制

btn.onclick = function(){ var bounds = map.getBounds(); bounds.northeast.R = Number(xNode.value); bounds.southwest.R = Number(yNode.value); map.setLimitBounds(bounds); };

通过事件解除显示限制

clear.onclick = function(){ map.clearLimitBounds(); };

设置舆图的显示范畴 

var myBounds = new AMap.Bounds([88.379391,20.861536],[117.379391,41.861536]) map.setBounds(myBounds); //但是不是出格精准，会以它感受最好的方法去显示

舆图的平移
panBy(x,y) x代表向左平移几多像素 / y代表向上平移几多像素
panTo([x坐标，y坐标]) 舆图会直接平移到这个位置

<input type="" id=‘xNode‘> <input type="" id=‘yNode‘> btn.onclick =function(){ map.panTo([xNode.value,yNode.value]) };

获取鼠标的经纬度
longitude 经度 / latitude 纬度

map.on(‘click‘,function(e){ //xyNode.innerHTML = e.lnglat.lng + ‘,‘ + e.lnglat.lat; map.setCenter([e.lnglat.lng,e.lnglat.lat]) });

设置舆图鼠标的默认样式
setDefaultCursor(‘样式‘)
cursor : 里面所有的样式都可以

map.setDefaultCursor(‘-webkit-grabbing‘);

舆图搜索

AMap.plugin(‘AMap.Autocomplete‘,function(){ new AMap.Autocomplete().search(要搜索的内容,function(status,data){ console.log(data 搜索出来的数据) }) })

案例：输入地点呈现下拉列表，点击可切换舆图

<div></div> <div id=‘setCenterNode‘> <!-- 搜索框 --> <input type="" id=‘searchText‘> <!-- 下拉列表内容显示位置 --> <ul id=‘node‘></ul> </div> --------- new AMap.Autocomplete({ input:‘searchText‘ });

加载插件的方法有两种

<script type="text/javascript" src="http://www.mamicode.com/https:/webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Autocomplete"></script> ------------- new AMap.Autocomplete({ input:‘searchText‘ });

舆图搜索与POI（兴趣点）结合1

AMap.service([‘AMap.PlaceSearch‘],function(){ new AMap.PlaceSearch({ pageSize:5, //当页一共显示几多条 pageIndex:1, //当前第几页 city:‘010‘, //兴趣点的都市 citylimit:true, //是否限制在设定的城内搜索 map:map, //展示在哪个舆图里 panel:‘setCenterNode‘ //放在哪个元素下 }) })

舆图搜索与POI（兴趣点）结合2