利用高德地图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. .Net Core Configuration源码探究

    前言     上篇文章我们演示了为Configuration添加Etcd数据源,并且了解到为Configuration扩展自定义数据源还是非常简单的,核心就是把数据源的数据按照一定的规则读取到指定的字 ...

  2. [ C++ ] set_new_handler解析

    当 operator new 中malloc返回值为0(NULL)时,表示分配内存失败(可能是因为内存不足), 此时会通过_callnewh()调用用户通过set_new_handler()设定的ne ...

  3. java常用的格式化

    日常工作中,总会遇到一些格式化显示的需求,下面做一些简单的整理 JDK中java.text下提供了格式化常用的工具类,具体结构见下图 时间日期格式化 DateFormat 采用DateFormat.g ...

  4. JNI通过线程c回调java层的函数

    1.参看博客:http://www.jianshu.com/p/e576c7e1c403 Android JNI 篇 - JNI回调的三种方法(精华篇) 2.参看博客: JNI层线程回调Java函数关 ...

  5. Python分支结构与流程控制

    Python分支结构与流程控制 分支结构 if 语句 分支结构在任何编程语言中都是至关重要的一环,它最主要的目的是让计算机拥有像人一样的思想,能在不同的情况下做出不同的应对方案,所以if语句不管是在什 ...

  6. .net Core中如何读取Appsetting配置文件

    现在APPSetting下面配置以下节点 { "Logging": { "IncludeScopes": false, "LogLevel" ...

  7. 关于延迟段创建-P1

    文章目录 1 疑问点 2 环境创建 2.1 创建用户 2.2 创建表test 2.3 查看表的段信息 2.4 延迟段创建相关参数 1 疑问点 P1页有句话说道: 在Oracle 11.2.0.3.0以 ...

  8. MACOS使用VScode进行C语言编程

    [B站有同步视频教程] 安装VScode 从官网下载vscode安装https://code.visualstudio.com/ 安装code runner插件 配置code runner从终端输出 ...

  9. https http 混合访问_https 页面中引入 http 资源的解决方式

    解决android 5.0 webview不能加载http与https混合内容的问题 在使用WebView加载https资源文件时,如果认证证书不被Android认可,那么会出现无法成功加载对应资源问 ...

  10. Git超详细用法，通俗易懂

    创建本地仓库 和 远端共享仓库 直接下载安装包:Git下载地址 安装 git,查看 git 版本,git version 配置项目的 git 账号 git config --global user.n ...