【地图API】收货地址详解2
上次讲解的方法是：
在地图中心点添加一个标注，每次拖动地图就获取地图中心点，再把标注的位置设置为地图中心点。可参考教程：http://www.cnblogs.com/milkmap/p/6126424.html
可能有开发者觉得，这个算法会有“延时”，这次提供一个新的方法：
将一张标注图片始终固定在地图中央，不在地图上添加标注。
使用CSS将一张标注样子的图片，固定在地图中央。
<style>
#mapBox{height:400px;width:600px;position:absolute;}
#img_point{position:absolute;top:200px;left:300px;z-index:9999999;}
</style>
创建地图
//创建地图
var map = new AMap.Map("mapBox", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom:14
});
获取并打印当前地图中央的经纬度
//打印当前经纬度
function addCenterPoint(){
var centerPoint = map.getCenter();
$pointBox.innerHTML = "当前经纬度为：" + centerPoint.getLng() + ',' + centerPoint.getLat();
}
addCenterPoint();
当地图滑动时，打印当前地图中央经纬度
//添加地图事件
map.on('moveend', function() {
addCenterPoint();
});
到这里，就完成了拖动地图，就可以打印地图中心点。同时，保持了标注图片一直在地图中央显示。
示例：http://zhaoziang.com/amap/deliver_address_point.htm
进阶的做法：
您还可以把地址解析的功能加上，当输入结构化地址时，如果地址解析成功，就重新设置地图中心点。
function geocoder() {
var myGeo = new AMap.Geocoder();
//地理编码,返回地理编码结果
myGeo.getLocation($addressBox.value, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
//地址解析成功
geocoder_CallBack(result);
}
else{
//地址解析失败
$pointBox.innerHTML = "查无此地址";
}
});
}
//地理编码返回结果展示
function geocoder_CallBack(data) {
var resultStr = "";
var geocode = data.geocodes;
var myLng = geocode[0].location.getLng();
var myLat = geocode[0].location.getLat();
resultStr += "当前坐标</b>：" + myLng + ", " + myLat;
$pointBox.innerHTML = resultStr;
map.setCenter(new AMap.LngLat(myLng,myLat));
}
全部源代码：
<!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>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
#addressBox{height:20px;width:600px;}
#mapBox{height:400px;width:600px;position:absolute;}
#pointBox{height:20px;width:600px;}
#img_point{position:absolute;top:200px;left:300px;z-index:9999999;}
</style>
<body>
<div>
<input id="addressBox" type="text" value="请输入结构化地址，例如北京市朝阳区望京街道首开广场" />
<input id="" type="button" onclick="geocoder();" value="搜索" />
</div>
<img id="img_point" src="marker64.png" />
<div id='pointBox'> </div>
<div id='mapBox'></div>
<div>
使用方法：<br />
1.输入地址，点击搜索<br />
2.如果不够准确，可以拖动地图改变经纬度
</div>
<script type="text/javascript">
var $addressBox = document.getElementById('addressBox');
var $pointBox = document.getElementById("pointBox"); //创建地图
var map = new AMap.Map("mapBox", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom:14
}); //打印当前经纬度
function addCenterPoint(){
var centerPoint = map.getCenter();
$pointBox.innerHTML = "当前经纬度为：" + centerPoint.getLng() + ',' + centerPoint.getLat();
}
addCenterPoint(); function geocoder() {
var myGeo = new AMap.Geocoder();
//地理编码,返回地理编码结果
myGeo.getLocation($addressBox.value, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
//地址解析成功
geocoder_CallBack(result);
}
else{
//地址解析失败
$pointBox.innerHTML = "查无此地址";
}
});
} //地理编码返回结果展示
function geocoder_CallBack(data) {
var resultStr = "";
var geocode = data.geocodes;
var myLng = geocode[0].location.getLng();
var myLat = geocode[0].location.getLat();
resultStr += "当前坐标</b>：" + myLng + ", " + myLat;
$pointBox.innerHTML = resultStr;
map.setCenter(new AMap.LngLat(myLng,myLat));
} //添加地图事件
map.on('moveend', function() {
addCenterPoint();
});
</script>
</body>
</html>
示例：http://zhaoziang.com/amap/deliver_address_point.htm
【地图API】收货地址详解2的更多相关文章
- 【地图API】地址录入时如何获得准确的经纬度？淘宝收货地址详解
用户需求:管理者需要录入一批商户,并在地图上把商户展示出来.但发现一些商户的地址描述并不清楚,导致商户位置出错.如何获得更加准确的商户位置呢? 分析:假设地址准确的,可以通过地址解析,得到准确的经纬度 ...
- 调用高德地图API（热力图）详解
具体脚本语言如下: <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- 微信支付开发(7) 收货地址共享接口V2
关键字:微信公众平台 JSSDK 发送给朋友 收货地址共享接口 openAddress 作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/p/weixin-open ...
- 微信支付v3开发(6) 收货地址共享接口
请看新版教程 微信支付开发(7) 收货地址共享接口V2 本文介绍微信支付下的收货地址共享接口的开发过程. 一. 简单介绍 微信收货地址共享,是指用户在微信浏览器内打开网页,填写过地址后,兴许能够免填 ...
- 42 Flutter仿京东商城项目 修改默认收货地址 显示默认收货地址
CheckOut.dart import 'package:flutter/material.dart'; import '../services/ScreenAdapter.dart'; impor ...
- 41 Flutter 仿京东商城项目签名验证 增加收货地址、显示收货地址 事件广播
加群452892873 下载对应41课文件,运行方法,建好项目,直接替换lib目录 AddressAdd.dart import 'package:dio/dio.dart'; import 'pac ...
- HMS Core定位服务在生活服务类App中可以自动填写收货地址啦
在涉及团购.外卖.快递.家政.物流.搬家等生活服务类的App.小程序中,填写收货地址是用户高频使用的功能.这一功能通常采取让用户手动填写的解决方案,例如上下拉动选择浙江省-->杭州市--> ...
- 微信共享收货地址 edit_address:fail 吐白沫级解决方案
又被微信坑了一整天,看完官方文档怎么测试都不通过,我一直怀疑是新版本微信支付我没有设置“共享收货地址”开关造成的. 后来经过验证,新版本不需要做这件事了. 那么,我没错,是微信的文档没及时更新... ...
- ecshop 订单-》设置默认收货地址，或者删除
设置位置:ecs_users标的 country字段,默认是0,默认地址是 users_address 的address_id 设置默认收货地址 /** * 设置默认地址 * * @access ...
随机推荐
- Sql Server 2008修改Sa密码
1.用Windows验证模式进入数据库管理器 右键根目录 >>>>属性>>>>左边的安全性 选择sql server 和windows 验证(SQL S ...
- 【转】详解Python的装饰器
原文链接:http://python.jobbole.com/86717/ Python中的装饰器是你进入Python大门的一道坎,不管你跨不跨过去它都在那里. 为什么需要装饰器 我们假设你的程序实现 ...
- ycsb使用方法
ycsb本身相当于客户端,不断向服务端发送请求,同时记录下这些请求耗费的时间. 那么,必须要有一个服务端在某个端口监听. ycsb可以在workload里写入服务端的ip和端口,也可以在命令行里写上. ...
- Vi Command 【转载】
原文: http://www.cnblogs.com/Jesenwuzj/archive/2010/03/18/1688776.html Vi中文手册 1.vi的基本概念 基本上vi可以分为三种状态, ...
- View的事件处理流程
一直对view的事件处理流程迷迷糊糊,今天花了点时间写了个栗子把它弄明白了. 1.view的常用的事件分为:单击事件(onClick).长按事件(onLongClick).触摸事件(onTouch), ...
- Var To DataTable
public static DataTable CopyToDataTable<T>(this IEnumerable<T> array) { var ret = new Da ...
- 特征脸(Eigenface)理论基础-PCA(主成分分析法)
在之前的博客 人脸识别经典算法一:特征脸方法(Eigenface) 里面介绍了特征脸方法的原理,但是并没有对它用到的理论基础PCA做介绍,现在做补充.请将这两篇博文结合起来阅读.以下内容大部分参考 ...
- 数据库知识整理<三>
保证数据的完整性: 3.1数据完整性概述: 数据完整性的意义:我们知道数据库能防止储存垃圾数据,RDBMS实现该功能主要是通过维护数据完整性来实现的.根据数据完整性实施方法我们将其分为四类:实体完整性 ...
- div+css实现各种形状（精心整理）
1.正方形.div {width: 100px;height: 100px;background: red;} 2.矩形.div {width: 200px;height: 100px;backgro ...
- 中国大学MOOC-陈越、何钦铭-数据结构-2016秋期中考试
判断题: 1-1 算法分析的两个主要方面是时间复杂度和空间复杂度的分析. (2分) 1-2 将N个数据按照从小到大顺序组织存放在一个单向链表中.如果采用二分查找,那么查找的平均时间复杂度是O(logN ...