1.初始化地图
var map = new AMap.Map("container", {
resizeEnable: true, // 设置可改变窗口大小
zoomEnable: true, // 设置可缩放
center: [114.056078,22.604554], // 设置地图中心为深圳
zoom: 11 // 设置缩放级别为11
});
2.地图中添加比例尺
var scale = new AMap.Scale(); // 初始化一个比例尺
map.addControl(scale); // 比例尺加入地图中
3.输入框自动补全
// 地址自动补全
var auto = new AMap.Autocomplete({
input: "work-location" // 绑定输入框为"work-location"
});
4.添加监听事件,地址输入完毕后,调用回调函数
// 监听地址栏
AMap.event.addListener(auto, "select", workLocationSelected);
5.定义前面的回调函数
实现 1.改变地图中心和缩放级别, 2.设置交通圈
// 工作地坐标
var position_value
// 地址填完就触发, 1.改变地图中心和缩放级别, 2.设置交通圈
function workLocationSelected(e){
// 获取工作地
var workAddress = $("#work-location").val();
var geocoder = new AMap.Geocoder({
city: "深圳", //城市,默认:“深圳”
radius: 1000 //范围,默认:500
});
//地理编码,返回地理编码结果
geocoder.getLocation(workAddress, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
loc_value = result.geocodes["0"].location;
position_value = [loc_value.getLng(),loc_value.getLat()]; // 获取工作地坐标
// 改变地图视角
**setCenter(position_value); // 1.设置中心点
setPolygon(); // 2.设置交通圈**
}
else{
console.log("wrong");
}
});
}
6.设置中心点
1.首先,自定义一个Icon
2.如果地图中心点已经被设置过,删除中心点
3.改变地图中心为工作地
4.实例化一个AMap.Marker,位置为工作地
var work_icon = new AMap.Icon({ // 工作地图标
size: new AMap.Size(60,70), //图标大小
image: "/static/imgs/worklocation.ico",
imageOffset: new AMap.Pixel(0, 0)
})
// ---------------------------------------------改变地图中心点函数
function setCenter(position_value){
if(workMarker)map.remove(workMarker);
// 删除旧点
// 改变地图中心点----改变缩放级别
map.setZoomAndCenter(12, position_value);
console.log("设置中心点")
// 标记新点
workMarker = new AMap.Marker({
map: map,
position: position_value,
icon: work_icon
});
}
7.设置交通圈
1.设置交通用时,与交通工具,这里写死为一小时,公交+地铁
2.若已经设置过交通圈,则清空上一个交通圈
// -----------------------------------------------------------------设置交通圈函数
var arrivalRange = new AMap.ArrivalRange(), t, v,centerMarker,polygonArray=[];
function setPolygon() {
t=60;
v="SUBWAY,BUS"; // 取交通方式
arrivalRange.search(position_value,t, function(status,result){
map.remove(polygonArray); // 清空上一个交通圈
polygonArray=[]
if(result.bounds){ // 若查询正常返回
for(var i=0;i<result.bounds.length;i++){
var polygon = new AMap.Polygon({ // new 一个交通圈
map:map, // 设置交通圈样式
fillColor:"yellow",
fillOpacity:"0.4",
strokeColor:"red",
strokeOpacity:"1",
strokeWeight:1
});
polygon.setPath(result.bounds[i]); // 设置交通圈范围
polygonArray.push(polygon); // 添加进列表
}
}
},{
policy:v // 配置交通方式
});
}