利用高德地图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基础 1. String类为什么是final的. 2. HashMap的源码,实现原理,底层结构. 3. 说说你知道的几个Java集合类:list.set.queue.map实现类咯... ...

  2. github知名企业开源项目索引

    亚马逊:https://github.com/amzn 饿了么 https://github.com/ElemeFEhttp://lrd.ele.me/腾讯 https://github.com/Te ...

  3. GRpc异常处理Filter

    全局错误处理服务端 微软已经实施了Interceptors,它们类似于Filter或Middlewares在ASP.NET MVC的核心或的WebAPI,它们可以用于全局异常处理,日志记录,验证等. ...

  4. java面试题——对于多态你是怎么理解的呢？不一样的角度，带你重新看java

    java面试的时候经常会被问到一个问题,那就是java三大特性:继承,封装和多态.那么这三者的含义究竟是什么你真的清楚吗?我看网上大多都是人云亦云.所以我想把我的想法记录下来供大家参考-今天先聊一个, ...

  5. 听说你还不知道CompletableFuture？

    java8已经在日常开发编码中非常普遍了,掌握运用好它可以在开发中运用几行精简代码就可以完成所需功能.今天将介绍CompletableFuture的在生产环境如何使用实践.CompletableFut ...

  6. 关于gulp复制文件时把整个目录结构都复制的问题解决

    有这么个场景,在开发时分模块开发,但是发布时不一定将按模块分布,比如,为了便于开发,图片是按照模块存放的,但是发布时只是放在images文件夹下,此时就需要用到本文中提到的插件gulp-flatten ...

  7. Lost connection to MYSQL server at 'reading for initial communication packet'

    这个异常,是我在对外开放了本地数据库端口后,测试能否连接上数据库时候出现的问题: 解决步骤: 1.services.msc打开服务窗口,重启mysql,进行重试,还不行: 2.对数据库进行操作 USE ...

  8. 免费馅饼——移动dp

    免费馅饼 题目描述 SERKOI最新推出了一种叫做"免费馅饼"的游戏: 游戏在一个舞台上进行.舞台的宽度为 \(W\) 格,天幕的高度为 \(H\) 格,游戏者占一格. 开始时游戏 ...

  9. JVM内存管理——总结篇

    JVM内存管理--总结篇 自动内存管理--总结篇 内存划分及作用 常见问题 内存划分及作用 程序计数器 线程私有.字节码行号指示器. 执行Java方法,计数器记录的是字节码指令地址:执行本地(Nati ...

  10. 代码文件编码unicode 无标签， 导入vs项目编译不过的问题

    很多人经常需要把代码分别在linux.windows上编译.在linux中gcc编译的时候,文件格式为utf-8无bom格式,可是如果将文件拿到windows上,用vs编译的时候,发现各种报错,且都是 ...