Python + 高德JS——房源可视化(六)：JS部分

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                                        // 配置交通方式
    });
}