上次讲解的方法是：

在地图中心点添加一个标注，每次拖动地图就获取地图中心点，再把标注的位置设置为地图中心点。可参考教程：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'>&nbsp;</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的更多相关文章

  1. 【地图API】地址录入时如何获得准确的经纬度？淘宝收货地址详解

    用户需求:管理者需要录入一批商户,并在地图上把商户展示出来.但发现一些商户的地址描述并不清楚,导致商户位置出错.如何获得更加准确的商户位置呢? 分析:假设地址准确的,可以通过地址解析,得到准确的经纬度 ...

  2. 调用高德地图API（热力图）详解

    具体脚本语言如下: <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  3. 微信支付开发(7) 收货地址共享接口V2

    关键字:微信公众平台 JSSDK 发送给朋友 收货地址共享接口 openAddress 作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/p/weixin-open ...

  4. 微信支付v3开发(6) 收货地址共享接口

    请看新版教程  微信支付开发(7) 收货地址共享接口V2 本文介绍微信支付下的收货地址共享接口的开发过程. 一. 简单介绍 微信收货地址共享,是指用户在微信浏览器内打开网页,填写过地址后,兴许能够免填 ...

  5. 42 Flutter仿京东商城项目 修改默认收货地址 显示默认收货地址

    CheckOut.dart import 'package:flutter/material.dart'; import '../services/ScreenAdapter.dart'; impor ...

  6. 41 Flutter 仿京东商城项目签名验证 增加收货地址、显示收货地址 事件广播

    加群452892873 下载对应41课文件,运行方法,建好项目,直接替换lib目录 AddressAdd.dart import 'package:dio/dio.dart'; import 'pac ...

  7. HMS Core定位服务在生活服务类App中可以自动填写收货地址啦

    在涉及团购.外卖.快递.家政.物流.搬家等生活服务类的App.小程序中,填写收货地址是用户高频使用的功能.这一功能通常采取让用户手动填写的解决方案,例如上下拉动选择浙江省-->杭州市--> ...

  8. 微信共享收货地址 edit_address:fail 吐白沫级解决方案

    又被微信坑了一整天,看完官方文档怎么测试都不通过,我一直怀疑是新版本微信支付我没有设置“共享收货地址”开关造成的. 后来经过验证,新版本不需要做这件事了. 那么,我没错,是微信的文档没及时更新... ...

  9. ecshop 订单-》设置默认收货地址，或者删除

    设置位置:ecs_users标的   country字段,默认是0,默认地址是 users_address 的address_id 设置默认收货地址 /** * 设置默认地址 * * @access ...

随机推荐

  1. Python.Scrapy.11-scrapy-source-code-analysis-part-1

    Scrapy 源代码分析系列-1 spider, spidermanager, crawler, cmdline, command 分析的源代码版本是0.24.6, url: https://gith ...

  2. win7 解锁注册表

    win7系统 各种百度,各种尝试,发现只此一种可以解锁 [Version] Signature=“$CHICAGO$” [DefaultInstall] DelReg=del [del] HKCU,S ...

  3. 【Java学习笔记】泛型

    泛型: jdk1.5出现的安全机制 好处: 1.将运行时期的问题ClassCastException转到了编译时期. 2.避免了强制转换的麻烦. <>: 什么时候用? 当操作的引用数据类型 ...

  4. hdu 1003

    Max Sum Time Limit: 1000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u Submit Statu ...

  5. 【转】让Chrome化身成为摸鱼神器，利用Chorme运行布卡漫画以及其他安卓APK应用教程

    下周就是十一了,无论是学生党还是工作党,大家的大概都会有点心不在焉,为了让大家更好的心不在焉,更好的在十一前最后一周愉快的摸鱼,今天就写一个如何让Chrome(google浏览器)运行安卓APK应用的 ...

  6. 业务代码中(java class)中如何实现多线程，并且将子线程中的值随方法返回返回值

    转载自http://bbs.csdn.net/topics/390731832 问题: public static String getAddress(final InputStream inputS ...

  7. [SmartFoxServer概述]使用文档

    如何使用文档和例子 这份文档提供了一份关于如何通过SmartFoxServer 2X(缩写SFS2X)文档掌握要点的快速教程.在使用例子和技术文档之前,我们建议先参考以下主题内容. 不管你是Smart ...

  8. Virtualbox修改bios信息安装Windows XP OEM

    转载 http://hi.baidu.com/guoyao11/item/631ad6eb4fb3d93887d9de11 具体方法有两个: 1.把下面的代码复制改后缀为BAT文件直接运行即可,以Le ...

  9. java后台开发传输乱码&&接口post传参失败

    起因: 前几天遇到的问题,才有时间记录,需求:本地生成xml形式的字符串以参数形式用post方法传送到对方的固定接口: 这个需求写的时候感觉很容易,本地测试的时候,也觉得很简单就过了,然后和对方联调的 ...

  10. 项目学习——电力系统底层架构ssh

    电力系统底层架构1.建立web工程 创建数据库 导入向对应的jar包2. 持久层: (1)在cn.itcast.elec.domain中创建持久化类ElecText @SuppressWarnings ...