第三天

可视化页面的设计（一）

功能：高德地图的可视化、图表联动、地点景区信息更新

高德地图可视化

高德主要的引用和实现是用js实现的，所以首先需要引用js文件

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=99e8165b38a7b852e95b9c4f710c9a74&plugin=AMap.CitySearch,AMap.AutoComplete,AMap.PlaceSearch"></script>

之后好需要其他文件一一引用

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

地图部分

/**
 * 
 */
//地图加载
var map = new AMap.Map("container", {
    resizeEnable: true
});
//输入提示
var autoOptions = {
    input: "tipinput"
};
var autoOptions2 = {
    button: "tipinput3"
};

AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() {
    var auto = new AMap.AutoComplete(autoOptions);
    var auto2 = new AMap.AutoComplete(autoOptions2);
    var placeSearch = new AMap.PlaceSearch({
        map: map,
        pageSize: 5, // 单页显示结果条数
        pageIndex: 1, // 页码
        city: "", // 兴趣点城市
        citylimit: true, //是否强制限制在设置的城市内搜索
        panel: "panel", // 结果列表将在此容器中进行展示。
        autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    }); //构造地点查询类
    var placeSearch2 = new AMap.PlaceSearch({
        pageSize: 5, // 单页显示结果条数
        pageIndex: 1, // 页码
        city: "", // 兴趣点城市
        citylimit: true, //是否强制限制在设置的城市内搜索
        map: map, // 展现结果的地图实例
        panel: "panel", // 结果列表将在此容器中进行展示。
        autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    });
    auto.on("select", select); //注册监听，当选中某条记录时会触发
    // auto.on("select", select2); //注册监听，当选中某条记录时会触发
    auto2.on("click", clickOn);

    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name); //关键字查询查询
        // document.getElementById('tipinput').innerHTML = e.poi.name;
        document.getElementById('nowcity').value = e.poi.district;
        test("./nowtable.jsp?nowcity='" + e.poi.district + "'");
        console.log(e.poi);

    }

    // function select2(e) {
    //     placeSearch2.search(e.poi.name);
    //     document.getElementById('nowcity').value = e.poi.district;
    //     test("./nowtable.jsp?nowcity='" + e.poi.district + "'");
    //     console.log(e.poi);


    // }

    function clickOn() {
        placeSearch2.search(document.getElementById('tipinput3').value);
    }
    document.getElementById("IFeditValue").onclick = clickOn;
    var divM = document.getElementById("IFeditValue");
    var iframe = document.getElementById('IFeditValue');
    iframe.onload = function() {
            iframe.contentDocument.onclick = function() {
                placeSearch2.search(document.getElementById("childin").value);

            };
        }
        // divM.onclick = function() {
        //     console.log(document.getElementById("childin").value);

    // }

});
var auto = new AMap.Autocomplete({
    input: "tipinput"
});
var auto2 = new AMap.Autocomplete({
    button: "tipinput3"
});
console.log(auto);
console.log(auto2);

function showCityInfo() {
    //实例化城市查询类
    var citysearch = new AMap.CitySearch();
    //自动获取用户IP，返回当前城市
    citysearch.getLocalCity(function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            if (result && result.city && result.bounds) {
                var cityinfo = result.city;
                var citybounds = result.bounds;
                document.getElementById('info').innerHTML = '您当前所在城市：' + cityinfo;
                test("./nowtable.jsp?nowcity='" + cityinfo + "'");
                //地图显示当前城市
                map.setBounds(citybounds);
            }
        } else {
            document.getElementById('info').innerHTML = result.info;
        }
    });
}
showCityInfo();

var iframe = document.getElementById('IFeditValue');

function test(Url) {
    iframe.src = Url;
}