利用高德地图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;width: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>

html地图定位的更多相关文章

  1. (十八)WebGIS中清空功能和地图定位功能的设计以及实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...

  2. Android之仿ele地图定位效果

    PS:最近项目要求,希望在选择地址的时候能够仿ele来实现定位效果.因此就去做了一下.不过ele使用高德地图实现的,我是用百度地图实现的.没办法,公司说用百度那就用百度的吧.个人觉得高德应该更加的精准 ...

  3. iOS 获取用户授权的用户隐私保护-地图定位

    获取用户授权的用户隐私保护地图定位示例://导入定位框架#import<CoreLocation/CoreLocation.h>@interfaceViewController()< ...

  4. 关于iOS地图定位中点击设置->隐私->定位服务 闪退问题

    iOS8之后,如果应用中用到了地图定位,那么点击设置->隐私->定位服务 再点击该应用有时候会出现闪退问题,其原因是iOS8之后定位中添加了 NSLocationWhenInUseDesc ...

  5. 百度地图API实现地图定位

    1.引用JS: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...

  6. ios8版本地图定位注意点

    学习ios地图定位 我先定义一个属性: @property (weak, nonatomic) IBOutlet MKMapView *mapV; 然后在项目运行时初始化该属性一些参数: //设置地图 ...

  7. Android 百度地图定位(手动+自动) 安卓开发教程

    近由于项目需要,研究了下百度地图定位,他们提供的实例基本都是用监听器实现自动定位的.我想实现一种效果:当用户进入UI时,不定位,用户需要定位的时候,自己手动点击按钮,再去定位当前位置.  经过2天研究 ...

  8. 针对不同手机系统的LBS地图定位解决方案

    原文:针对不同手机系统的LBS地图定位解决方案 摘要: 针对目前的三种手机系统:Android安卓.S60塞班.IOS苹果,做出的三种不同的手机地图应用解决方案. 查阅了多数地图API对手机的支持情况 ...

  9. 百度地图定位SDK 之构想

    百度地图定位 前提 从香港旅游回来,心中油然升起一股热血滂湃,激励自己发现市场需求,向创业奋进,朝着梦想前进. 简介 百度Android定位SDK支持Android1.5以及以上设备,提供: 定位功能 ...

  10. 地图定位CoreLocation框架,地理位置编码与反编码

    在现代互联网时代,越来越多的应用,都用到了地图定位功能,在iOS开发中,想要加入这种功能,必须基于两个框架进行开发: 1.Map Kit:用于显示地图, 2.CoreLocation:用于显示地理位置 ...

随机推荐

  1. 初识Java Java基础知识

    今天给大家带来的是初级Java基础部分的知识:包括初识Java.变量.常量.数据类型.运算符.各种选择结构.循环结构.数组等Java的基础语法部分!!!内容.步骤超详细,附有各种案例的源代码(可以直接 ...

  2. 车辆运动控制算法——MPC

    MPC是模型预测控制算法,在车辆运动跟踪轨迹的控制中发挥很大的优势 基础的不多说,下面记录我对LQR/MPC/二次规划问题的理解 我们从LQR来引出MPC LQR的能量函数,目的是求函数J最小,即用最 ...

  3. 【状压dp】Bzoj1294 围豆豆

    题目 Input 第一行两个整数N和M,为矩阵的边长. 第二行一个整数D,为豆子的总个数. 第三行包含D个整数V1到VD,分别为每颗豆子的分值. 接着N行有一个N×M的字符矩阵来描述游戏矩阵状态,0表 ...

  4. Spring 获取单例流程(一)

    读完这篇文章你将会收获到 在 getBean 方法中, Spring 处理别名以及 factoryBean 的 name Spring 如何从多级缓存中根据 beanName 获取 bean Spri ...

  5. tableau入门学习笔记--分页功能

    最近在使用tableau来制作报表,对于tableau也是第一次接触并使用,每天学习些新的功能来记录在博客里,给他人方便,也给自己方便 tableau分页功能 很多时候由于工作表过长而出现拖拽条,如果 ...

  6. 常用API - 时间日期类

    Date类 概述 java.util.Date类 表示特定的瞬间,精确到毫秒. 继续查阅Date类的描述,发现Date拥有多个构造函数,只是部分已经过时,但是其中有未过时的构造函数可以把毫秒值转成日期 ...

  7. vx小程序(1)

    一.程序配置 app.json 1. pages字段——用于描述当前小程序的页面路径. 2.window字段——定义小程序所有页面的顶部背景颜色,文字颜色等. 注意:可以在pages/logs目录下的 ...

  8. 石子合并——区间dp

    石子合并(3种变形) <1> 题目: 有N堆石子排成一排(n<=100),现要将石子有次序地合并成一堆,规定每次只能选相邻的两堆合并成一堆,并将新的一堆的石子数,记为改次合并的得分, ...

  9. 最大的位或 HDU - 5969 简单思维题

    题目描述 B君和G君聊天的时候想到了如下的问题. 给定自然数l和r ,选取2个整数x,y满足l <= x <= y <= r ,使得x|y最大. 其中|表示按位或,即C. C++. ...

  10. 重学 Java 设计模式：实战模版模式「模拟爬虫各类电商商品，生成营销推广海报场景」

    作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 黎明前的坚守,的住吗? 有人举过这样一个例子,先给你张北大的录 ...