html地图定位

利用高德地图api实现简单的地图功能，包括定位，地图缩放，搜索，列表展示等等基础功能


<!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>
<link rel="stylesheet"
    href="https://cache.amap.com/lbs/static/main1119.css" />
<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.13&key=1351d632dc1826495e1ae0e97da35baf&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

        <style type="text/css">
        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
            border-bottom: solid 1px silver;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>
    <div id="myPageTop" style="left:50px;200px">
        <table>
            <tr>
                <td><label>请输入关键字：</label></td>
            </tr>
            <tr>
                <td><input id="tipinput" /></td>
            </tr>
        </table>
    </div>
    <div id="closeMaps"></div>
    
    <script type="text/javascript">
        var cityCode;
        //地图加载
        var map = new AMap.Map("container", {
            resizeEnable : true
        });

        map.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                // 设置定位超时时间，默认：无穷大
                timeout : 10000,
                buttonOffset : new AMap.Pixel(10, 20),
                zoomToAccuracy : false,
                //  定位按钮的排放位置,  RB表示右下
                buttonPosition : 'RB'
            })

            geolocation.getCurrentPosition()
            AMap.event.addListener(geolocation, 'complete', onComplete)
            AMap.event.addListener(geolocation, 'error', onError)

            function onComplete(data) {
                cityCode = data.addressComponent.adcode;
                // data是具体的定位信息
            }

            function onError(data) {
                // 定位出错
            }
            //输入提示
            var autoOptions = {
                input : "tipinput",
                city : "成都"
            };
            var auto = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                pageSize: 5, // 单页显示结果条数
                pageIndex: 1, // 页码
                type: "汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施",
                citylimit: false,
                panel: "panel",
                map : map
            }); //构造地点查询类
            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(cityCode);
                placeSearch.search(e.poi.name); //关键字查询查询
            }
            AMap.plugin('AMap.ToolBar', function() {
                var toolbar = new AMap.ToolBar();
                map.addControl(toolbar)
            })
        });
    </script>
</body>
</html>
休闲玩家佛系更博