会计地图功能实现与交互-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3821/article/details/82648203

这是我负责会计地图的一块功能，实现定位，搜索，显示附近等，不多说直接上代码……

html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>输入提示后查询</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script src="../API/jquery-2.1.4.min.js"></script>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=ada0145080deff882d2a28e8af2047ad&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch,AMap.onComplete"></script>
    <link rel="stylesheet" type="text/css" href="../API/Api.css">
    <script src="../API/Final.js"></script>
</head>
<body>
<div class="box_dis">
    <input class="myname" type="text" value="搜索地点" id="tipinput"/>
    <!--<input type="text" name="keyword" id="myname" class="myname" />-->

</div>
<div class="distance">
    <div id="container"></div>
</div>
<div class="scroll" id="view">
    <div id="panel"></div>
    <div id="panl"></div>
</div>
<div id="containe"></div>
</body>
</html>

JS：

/**
 * Created by lixuefeng on 16-1-25.
 */

window.onload = function () {
    input();
    getLocation();
    click();
    search();
}
function input() {
    function addListener(element, e, fn) {
        if (element.addEventListener) {
            element.addEventListener(e, fn, false);
        }
        else {
            element.attachEvent("on" + e, fn);
        }
    }

    var tipinput = document.getElementById("tipinput");
    addListener(tipinput, "click", function () {
        tipinput.value = "";
        //$('.myname').css('display', 'none');
    })
    addListener(tipinput, "blur", function () {
        tipinput.value ="搜索地点";
    })
}

var map, geolocation;
//加载地图，调用浏览器定位服务
var autoOptions = {
    input: "tipinput"
};
function click() {
    var clickEventListener = map.on('click', function (e) {

        var map = {latitude: e.lnglat.getLat(), longitude: e.lnglat.getLng()}
        localStorage.setItem("data", JSON.stringify(map));
        near_address()
    });
}


function search() {
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
        var poiArr = e.poi.name;
        localStorage.setItem("name", JSON.stringify(poiArr));
        var geocoder = new AMap.Geocoder({
            radius: 1000 //范围，默认：500
        });
        geocoder.getLocation(JSON.parse(localStorage.getItem("name")), function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result);
            }
        });
    }
}
function geocoder_CallBack(data) {
    var map = new BMap.Map("containe");
    $(document).ready(function () {
        $("#panel").remove();
    });
    $("#panl").empty();
    var geocode = data.geocodes;
    var dress = JSON.parse(localStorage.getItem("info"))
    var obj_info = {latitude: geocode[0].location.getLat(), longitude: geocode[0].location.getLng()}//gaiII
    localStorage.setItem("data", JSON.stringify(obj_info));
    get_address()
}
function getLocation() {
    map = new AMap.Map('container', {
        resizeEnable: true
    });
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 10),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
    });
    $('.amap-logo').css('display', 'none');
    $('.amap-copyright').css('display', 'none');
    //$('.amap-geo').css('display', 'none');
}
function showPosition(position) {
    var obj_info = {latitude: position.coords.latitude, longitude: position.coords.longitude};
    console.log(obj_info.latitude)
    localStorage.setItem("info", JSON.stringify(obj_info));
    displayPOI()
}
function near_address() {

    $(document).ready(function () {

        $("#panel").remove();
    });
    $("#panl").empty();
    get_address()

}
var map = new BMap.Map("containe");
var mOption = {
    poiRadius: 2500,           //半径为1000米内的POI,默认100米
    numPois: 30             //列举出50个POI,默认10个
}
map.centerAndZoom(mPoint, 15);
map.enableScrollWheelZoom();
var myGeo = new BMap.Geocoder();
function get_address() {
    var mPoint = new BMap.Point(JSON.parse(localStorage.getItem("data")).longitude + 0.0065, JSON.parse(localStorage.getItem("data")).latitude + 0.0060);
    var myGeo = new BMap.Geocoder();        //创建地址解析实例
    myGeo.getLocation(mPoint,
        function mCallback(rs) {
            var allPois = rs.surroundingPois;       //获取全部POI（该点半径为100米内有6个POI点）
            allPois.forEach(function (place) {
                var html = "<div class='list' ><div class='site' id=" + place.title + ">" + place.title + "</div><div class='site_down'>" + place.address + "</div><span class='right'><img class='tex'  src='../API/outstyle091100004.jpg' id=" + place.title + "></span></div></div>";
                $("#panl").append(html);
                $($.parseHTML(html, document, true)).appendTo("body");
                $(document).ready(function () {
                    $('#' + place.title).click(function () {
                        $('.tex').css('display', 'none');
                        $('#' + place.title).show();
                    });
                });
            })
        }, mOption
    );
}
function displayPOI() {
    var mPoint = new BMap.Point(JSON.parse(localStorage.getItem("info")).longitude + 0.0065, JSON.parse(localStorage.getItem("info")).latitude + 0.0060);
    ss(mPoint)
}
function ss(mPoint) {
    map.addOverlay(new BMap.Circle(mPoint, 0));        //添加一个圆形覆盖物
    myGeo.getLocation(mPoint,
        function mCallback(rs) {
            var allPois = rs.surroundingPois;       //获取全部POI（该点半径为100米内有6个POI点）
            allPois.forEach(function (place) {
                var html = "<div class='list' ><div class='site' id=" + place.title + ">" + place.title + "</div><div class='site_down'>" + place.address + "</div><span class='right'><img class='tex'  src='../API/outstyle091100004.jpg' id=" + place.title + "></span></div></div>";
                $("#panel").append(html);
                $(document).ready(function () {
                    $('#' + place.title).click(function () {
                        $('.tex').css('display', 'none');
                        $('#' + place.title).show();
                    });
                });
            })
        }, mOption
    );
}

CSS：

.search{
    height: 20px;
    width: 98%;
    margin-left: 12px;
    border:1px solid #e3e3e3;
    text-align: center;
    font-size: 5px;
   color:gray;
}
input
{
    height: 20px;
    width: 98%;
    margin-left: 12px;
    border:1px solid #e3e3e3;
    padding:0px 16px;
    font-size: 5px;
    color:gray;
}
.myname
{
    background:url(search64.png) center left no-repeat;
    background-size:15px 15px;
}

#containe{
    display: none;
}
#mapContainer{
    height: 300px;
    width: 100%;



    left: 0;
    right:0;
    bottom:0;
}
.map{
    height: 300px;
    width: 100%;



    left: 0;
    right:0;
    bottom:0;
}
.scroll{
    height: 325px;
    width: 100%;
    overflow-y:scroll;
}
/*div#view::-webkit-scrollbar {*/
    /*background: transparent;*/
/*}*/
/*overflow:hidden*/
html { overflow: hidden; }
body{
    margin: 0;
}
.distance{
    margin-top: 8px;
    margin-bottom: 4px;
}
.box_dis{
    margin-top: 10px;
}



/*div#view:hover::-webkit-scrollbar {*/
    /*background: lightyellow;*/
/*}*/
.list{
    width: 98%;
    height: 50px;

    border-bottom:1px solid #e3e3e3;
    margin-left:25px;
}
/*.list{*/
    /*width: 98%;*/
    /*height:20px;*/

    /*border-bottom:1px solid #e3e3e3;*/
    /*margin-left:25px;*/
/*}*/
.site{

    padding-top: 6px;
    /*width: 98%;*/
    /*height: 50px;*/

    /*border-bottom:1px solid #e3e3e3;*/
    /*margin-left:25px;*/
}
.site_down{
    font-size: 10px;
    color:gray;
    padding-top: 1px;


    float: left;
}
.right{
    float: right;
    margin-top: 0px;
    margin-right: 20px;
}
/*{*/
    /*position: absolute;*/
    /*top:0;*/
    /*left: 0;*/
    /*right:0;*/
    /*bottom:0;*/
/*}*/
.tex{
    height:20px;
    width: 20px;
    display: none;
}
.text{
    height:15px;
    width: 15px;
    text-align: center;
}
.hide{
    display: none;
}
************
html, body {
    margin: 0;
    height: 100%;
    width: 100%;

}

#container {

    left: 0;
    right: 0;

    width: 100%;
    height: 300px;
}

.button-group {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    padding: 10px;
}

.button-group .button {
    height: 28px;
    line-height: 28px;
    background-color: #0D9BF2;
    color: #FFF;
    border: 0;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
}
.button-group .inputtext {
    height: 26px;
    line-height: 26px;
    border: 1px;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
}
/*
.tip {
   position: absolute;
   bottom: 30px;
   right: 10px;
   background-color: #FFF;
   text-align: center;
   border: 1px solid #ccc;
   line-height: 30px;
   border-radius: 3px;
   padding: 0 5px;
   font-size: 12px;
}
*/
#tip {
    background-color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    font-size: 12px;
    right: 10px;
    top: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
    line-height: 30px;
}

/*
#tip input[type='button'] {
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #0D9BF2;
	height: 30px;
	text-align: center;
	line-height: 30px;
	color: #fff;
	font-size: 12px;
	border-radius: 3px;
	outline: none;
	border: 0;
}
*/
.amap-info-content {
    font-size: 12px;
}

/*#myPageTop {*/
    /*position: absolute;*/
    /*top: 5px;*/
    /*right: 10px;*/
    /*background: #fff none repeat scroll 0 0;*/
    /*border: 1px solid #ccc;*/
    /*margin: 10px auto;*/
    /*padding:6px;*/
    /*font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";*/
    /*font-size: 14px;*/
/*}*/
/*#myPageTop label {*/
    /*margin: 0 20px 0 0;*/
    /*color: #666666;*/
    /*font-weight: normal;*/
/*}*/
/*#myPageTop input {*/
    /*width: 170px;*/
/*}*/
/*#myPageTop .column2{*/
    /*padding-left: 25px;*/
/*}*/