高德地图JSApi
<!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"> </span></p>
<p><span id="iAddress"> </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的更多相关文章
- 高德地图JS-API (超简单Get新技能√)
上几章我们研究了百度地图SDK的用法,虽然不难但是配置起来也是相当的繁琐,现在高德LBS开放平台推出了基于HTML5的地图组件,我们可以通过WebView直接用URL 以GET方式进行请求就可以实现位 ...
- 高德地图(AMap)JavaScript API的使用
申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: <script type="text/j ...
- Vue 高德地图 路径规划 画点
CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的ke ...
- 高德地图的JSAPI学习笔记【一】
高德地图的项目要做 学习笔记记录下来 一.注册账号并申请Key 二.准备页面写好 1.在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key: <sc ...
- 如何实现在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 ...
随机推荐
- MySQL索引1
索引最大作用就是提高对表中数据的查询速度,就像书的目录那样重要,可以快速查到所需的知识. 上面是11万多条数据的表,使用语句查询,如: 耗时:0.108s 再比如: 用时:0.004s 接下来创建索引 ...
- docfx （一）
什么是docFX? DocFX 是一个基于.NET的API文档生成器,当前支持 C# 和 VB.它可以通过你的代码中的三斜杠注释生成 API 参考文档.同样也支持你使用 Markdown 文件创建一些 ...
- Java内存溢出分析方法(Eclipse Memory Analyzer 使用简单入门)
转载至:http://outofmemory.cn/java/jvm/OutOfMemoryError-analysis 工具 安装Memory Analyse Tools(MAT) 工具, 可以直接 ...
- [UWP]理解及扩展Expander
##1. 前言 最近在自定义Expander的样式,顺便看了看它的源码. Expander控件是一个ContentControl,它通过IsExpanded属性或者通过点击Header中的Toggle ...
- 数据库学习任务四：数据读取器对象SqlDataReader、数据适配器对象SqlDataAdapter、数据集对象DataSet
数据库应用程序的开发流程一般主要分为以下几个步骤: 创建数据库 使用Connection对象连接数据库 使用Command对象对数据源执行SQL命令并返回数据 使用DataReader和DataSet ...
- 从聚合数据请求菜谱大全接口数据，解析显示到ListView
- IT行业有前景么？一个10年行内人的6点看法
本人毕业快11年了. 大学读的建筑专业,却在IT行业干了10年. 真心来讲,我非常感谢好兄弟老唐,是他在我迷茫的那两年,领着我踏入了IT行业,也找到了自己的兴趣爱好. 这些年我经常在知乎.博客等地方发 ...
- 201521123084 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- 【Beta】 第六次Daily Scrum Meeting
一.本次会议为第六次meeting会议 二.时间:10:00AM-10:20AM 地点:禹州楼 三.会议站立式照片 四.今日任务安排 成员 昨日任务 今日任务 林晓芳 对目前完成的模块进行全面测试,并 ...
- 关于C语言
对于C语言方面 觉得自己在数组方面比较薄弱,寒假之前也借了一些书关于C语言的希望能在家里好好看看,也看了差不多两三百页,视频没怎么看,看了七八集,希望学一些深入的语法或者说是算法.