火星坐标获取demo

#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}

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();

}

//逆地理位置编码(火星坐标---->地址)

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;

}

//初始化标记点

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

});

}

}

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

高德地图JS-API &lpar;超简单Get新技能&Sqrt;&rpar;

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

高德地图&lpar;AMap&rpar;JavaScript API的使用

申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件:

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

如何实现在H5里调起高德地图APP？(下)

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

如何实现在H5里调起高德地图APP？(上)

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

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

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

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

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

Nuxt使用高德地图

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

随机推荐

HDU 5358 尺取法&plus;枚举

题意:给一个数列,按如下公式求和. 分析:场上做的时候,傻傻以为是线段树,也没想出题者为啥出log2,就是S(i,j) 的二进制表示的位数.只能说我做题依旧太死板,让求和就按规矩求和,多考虑一下就能发 ...

Android利用Http下载文件

Android利用Http下载文件 一.场景 下载存文本文件和下载如mp3等大容量的文件 界面 二.代码编写 1.AndroidMainfest.xml中配置 主要是解决网络权限和写SDCard的权限 ...

【ES6】Set和Map中的NaN

在JavaScript中,有个有意思的的式子:NaN !== NaN.在Set中的元素的重复检查或者Map键的定位过程中,都是用的类似恒等的检查逻辑.该逻辑和恒等检查的主要区别就是:NaN等于自身.

字符编码详解　good

字符编码详解 字符编码详解

&lbrack;Asp&period;net&rsqb;站点地图SiteMap

原文:[Asp.net]站点地图SiteMap 引言 在项目中发现使用站点地图的控件,之前没总结过这方面的东西,就写了一个demo测试了一下,这里记录一下,算是总结吧. Web.sitemap &lt ...

PHP &plus; JavaScript &plus; Ajax 实现无刷新页面加载效果

数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...

LINUX LVM和快照卷配置和管理

具体参考这个文章把: http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_linux_042_lvm.html 1.LVM是什么 逻辑卷管理LVM是一个多 ...

安装并使用pt-ioprofile

pt-ioprofile,是一个percona的性能分析工具,可以查看进程输出.输入,打印一些表文件及活动IO.pt-ioprofile是一个只读工具,所以对数据没风险.由于网上对pt-ioprofi ...

Nexus私服的安装与配置

Nexus的安装与配置 仅以此文,献给陷入懒癌晚期的小伙伴们. 本文基于nexus 3.xx .0. What?Why?When?Who?Where? Sonatype Nexus是一款maven仓库 ...