高德地图定位兼搜索

pipimob

2016-01-17

这几天一直忙着写高德地图的定位兼搜索功能，现在有点眉目了，但还是偶尔会出bug，希望大家有所借鉴，但更希望给提点建议高德地图定位兼搜索，不知好不好

我的缺点就是把三个地图整合到一块去了，分开写我实在不会，以后会的话一定分享…………

大家有想尝试的得去高德API注册一个密钥，也就是key，我这里是ada0145080deff882d2a28e8af2047ad

<!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.Autocomplete,AMap.PlaceSearch"></script>
    <link rel="stylesheet" type="text/css" href="../API/Api.css">
</head>
<body>
<div class="box_dis">
    <input class="search" id="tipinput"/>
</div>
<div class="distance">
    <div id="container"></div>
</div>
<div class="scroll" id="view">
    <div id="panel"></div>
</div>
<div id="containe"></div>
<!--<div id="container"></div>-->
<script type="text/javascript">
       window.onload = function () {

        getLocation()
        displayPOI()
    }
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
    }
    function showPosition(position) {
        var obj_info = {latitude: position.coords.latitude, longitude: position.coords.longitude};
        localStorage.setItem("info", JSON.stringify(obj_info));

    }
    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true
    });
    $('.amap-logo').css('display','none');
    $('.amap-copyright').css('display','none');
    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.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    var autoOptions = {
        input: "tipinput"
    };
    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 dress = JSON.parse(localStorage.getItem("info"))
    var map = new BMap.Map("containe");
    var mPoint = new BMap.Point(dress.longitude, dress.latitude);
    map.centerAndZoom(mPoint, 15);
    map.enableScrollWheelZoom();        //启用滚轮缩放
    var mOption = {
        poiRadius: 2500,           //半径为1000米内的POI,默认100米
        numPois: 20              //列举出50个POI,默认10个
    }
    var myGeo = new BMap.Geocoder();        //创建地址解析实例
    function displayPOI() {
        map.addOverlay(new BMap.Circle(mPoint, 0));        //添加一个圆形覆盖物
        myGeo.getLocation(mPoint,
                function mCallback(rs) {
                    var allPois = rs.surroundingPois;       //获取全部POI（该点半径为100米内有6个POI点）
                    for (i = 0; i < allPois.length; ++i) {
                        document.getElementById("panel").innerHTML += "<div class='list' id="+allPois[i].title+"><div class='site'>" + allPois[i].title +"</div><div class='site_down'>" + allPois[i].address + "</div><span class='right'><img class='tex'  src='../API/outstyle091100004.jpg' id="+allPois[i].title+"></span></div></div>";
                        map.addOverlay(new BMap.Marker(allPois[i].point));
                        $('.anchorBL').css('display','none');
                    }
                }, mOption
        );
    }
</script>
</body>
</html>

高德 api 地图api