<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>火星坐标获取demo</title>

<script src="http://webapi.amap.com/js/marker.js"></script>

<script type="text/javascript" src='http://webapi.amap.com/maps?v=1.3&plugin=AMap.Geolocation,AMap.ToolBar,AMap.Geocoder,AMap.PlaceSearch,AMap.Autocomplete,AMap.Driving&key=自己应用的key'></script>

<style>

#iMap{height:500px;width:600px;float:left;}

.info{float:left;margin:0 0 0 10px;}

label{width:80px;float:left;}

.detail{padding:10px;border:1px solid #aaccaa}

</style>

</head>

<body onLoad="mapInit()">

    <div id="iMap"></div>

    <div class="info">

        <h1>坐标拾取工具（GCJ-02坐标）</h1>

        <p>说明：</p>

        <p>1、鼠标滚轮可以缩放地图，拖动地图。</p>

        <p>2、点击地图，即可获得GCJ-02的经纬度坐标，即火星坐标。</p>

        </br>

        <div class="detail">

            <p><span id="lnglat">&nbsp;</span></p>

            <p><span id="iAddress">&nbsp;</span></p>

        </div>

    </div>

</body>

<script language="javascript">

var mapObj;

var lnglatXY;

//初始化地图

function mapInit(){

    var opt = {

        level: 15, //设置地图缩放级别

       // center: new AMap.LngLat(116.397428, 39.90923) //设置地图中心点

    } ;

    mapObj = new AMap.Map("iMap", opt);  

    AMap.event.addListener(mapObj,'click',getLnglat); //点击事件

    initFlagShop();

    //mapObj.setFitView();//把所有的标记点全部显示出来，所以会有所缩放,//不知为啥，会报错

}

function geocoder() {

    regeocoder(lnglatXY);//通过火星坐标获取地址名称，iner进dom

    //添加标记点

    var pMarker = new AMap.Marker({

        position: lnglatXY,

        title: '选中点',

        map:mapObj

    });

}

//鼠标点击，获取经纬度坐标

function getLnglat(e){

    mapObj.clearMap();//应该是清除坐标的意思

    initFlagShop();

    var x = e.lnglat.getLng();

    var y = e.lnglat.getLat();

    document.getElementById("lnglat").innerHTML = x + "," + y;

    lnglatXY = new AMap.LngLat(x,y);

    geocoder();

}

</script>

<script type="text/javascript">

    //逆地理位置编码（火星坐标---->地址）

    function regeocoder(lnglatXY) {  //逆地理编码

        var geocoder = new AMap.Geocoder({

            radius: 1000,

            extensions: "all"

        });

        geocoder.getAddress(lnglatXY, function(status, result) {

            if (status === 'complete' && result.info === 'OK') {

                geocoder_CallBack(result);

            }

        });

      //  mapObj.setFitView();

    }

    function geocoder_CallBack(data) {

        var address = data.regeocode.formattedAddress; //返回地址描述

        document.getElementById("iAddress").innerHTML = address;

    }

</script>

<script type="text/javascript">     

    //初始化标记点

    function initFlagShop(){

           //假数据

           var shops = [{L: 23.123678, I: 113.28342600000002, lng: 113.283426, lat: 23.123678},

                        {L: 23.124783, I: 113.287375, lng: 113.287375, lat: 23.124783}];

         //在地图上添加点标记

        var markers = [];

        for (var i = 0; i < shops.length; i += 1) {

            var marker;

            marker = new AMap.Marker({

                    position: shops[i],

                    title: '已被选作商户的点',

                    map:mapObj

            });

        } 

    }

</script>

</html>

js真的是门有点散漫自由的语言，不像java那么严谨规范。

高德地图JSApi的更多相关文章

  1. 高德地图JS-API (超简单Get新技能√)

    上几章我们研究了百度地图SDK的用法,虽然不难但是配置起来也是相当的繁琐,现在高德LBS开放平台推出了基于HTML5的地图组件,我们可以通过WebView直接用URL 以GET方式进行请求就可以实现位 ...

  2. 高德地图(AMap)JavaScript API的使用

    申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: <script type="text/j ...

  3. Vue 高德地图 路径规划 画点

    CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的ke ...

  4. 高德地图的JSAPI学习笔记【一】

    高德地图的项目要做 学习笔记记录下来 一.注册账号并申请Key  二.准备页面写好 1.在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key: <sc ...

  5. 如何实现在H5里调起高德地图APP？（下）

    这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...

  6. 如何实现在H5里调起高德地图APP？（上）

    这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前往方式. 场景一.在高德地图上展示Marker点或者POI标记 在一些基于位置分享的应用开发 ...

  7. 在H5页面内通过地址调起高德地图实现导航

    项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航. 如下图: 实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航. 由于项目中用到的是高德 ...

  8. 如何实现在H5里调起高德地图APP？

    http://www.cnblogs.com/milkmap/p/5912350.html 这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前 ...

  9. Nuxt使用高德地图

    事先准备 注册账号并申请Key 1. 首先,注册开发者账号,成为高德开放平台开发者 2. 登陆之后,在进入「应用管理」 页面「创建新应用」 3. 为应用添加 Key,「服务平台」一项请选择「 Web ...

随机推荐

  1. 使用xorm工具，根据数据库自动生成 go 代码

    使用xorm工具,根据数据库自动生成 go 代码 引入 使用 golang 操作数据库的同学都会遇到一个问题 -- 根据数据表结构创建对应的 struct 模型.因为 golang 的使用首字母控制可 ...

  2. HttpResponseMessage获取请求响应体内容

    问题描述 使用httpClient获取的HttpResponseMessage类型的response,直接对其toString()获取的是请求的响应头,并没有获取响应体的内容 解决办法 HttpRes ...

  3. Openfire分析之三：ConnectionManager 连接管理（1）

    Openfire是怎么实现连接请求的? XMPPServer.start()方法,完成Openfire的启动.但是,XMPPServer.start()方法中,并没有提及如何监听端口,那么Openfi ...

  4. Flask01 初识flask、flask配置

    1 什么是flask Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . 百度百科:点击前往 中文文档: ...

  5. [读书笔记] 三、搭建基于Spring boot的JavaWeb项目

    一.POM <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3. ...

  6. MyBatis框架——关系映射（一对多、多对多、多对一查询）

    关系映射 一.映射(多)对一.(一)对一的关联关系 1).使用列的别名 ①.若不关联数据表,则可以得到关联对象的id属性 ②.若还希望得到关联对象的其它属性.则必须关联其它的数据表 1.创建表: 员工 ...

  7. MySQL（四）之MySQL数据类型

    一.数据类型概述 MySQL的数据类型有大概可以分为5种,分别是 整数类型.浮点数类型和定点数类型.日期和时间类型.字符串类型.二进制类型.现在可以来看看你对这5种类型的熟悉程度,哪个看起来懵逼了,那 ...

  8. 用python实现简单的数字信号软件滤波处理

    做嵌入式开发,经常需要通过逻辑分析仪对数字信号进行数据分析.如果信号源附近有强干扰源,并且逻辑分析仪滤波效果不好的话,获取到的数字信号,经常带有一些"毛刺",这些"毛刺& ...

  9. 3.修改第一个程序来点亮LED

    在上一节中已经将驱动程序框架搭建好了 接下来开始写硬件的操作(控制LED): (1)看原理图,确定引脚 (2)看2440手册 (3)写代码(需要使用ioremap()函数映射虚拟地址,在linux中只 ...

  10. 编程零基础应当如何开始学习 Python？

    提前说一下,这篇福利多多,别的不说,直接让你玩回最有手感的怀旧游戏,参数贴图很方便自己可以根据喜好修改哦. 本篇通过以下四块展开,提供大量资源对应. 选一个好版本 有没有看过<在下坂本,有何贵干 ...