百度地图API实现选择地址

百度地图API实现选择地址(要申请百度地图的AK**)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="text/css">
        body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
        #l-map{height:300px;width:100%;}
        #r-result{width:100%;}
        #flag{
            width: 3px;
            height: 3px;
            border: 0px;
            position: absolute;
            top: 206px;
            left:210px;
        }
    </style>
    <link rel="stylesheet" href="/resources/mui/css/mui.min.css">
    <style>
        h5 {
            margin: 5px 7px;
        }

    </style>
    <script src="/resources/mui/js/mui.min.js"></script>
    <script>
        mui.init();
    </script>
    <script type="text/javascript" src="/resources/h5/js/jquery.min.js" ></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=kizQXCziKewDq48dsdwImp1a58rrepp"></script>
    <title>选择地址</title>
</head>
<body>

<div id="search">
    <form class="mui-input-group">
        <div class="mui-input-row">
            <input type="hidden" name="messageId" id="messageId" value="${(messageId)!''}">
            <input type="hidden" name="commentText" id="commentText" value="${(commentText)!''}">
            <input id="suggestId" type="text" class="mui-input-clear" placeholder="地址检索" style="text-align: center">
        </div>
    </form>
</div>
<div id="l-map"></div>
<div id="r-result">

</div>
<div id="flag">
    <a style="color:red;"><span class="mui-icon mui-icon-location"></span></a>
</div>
<!--<div id="searchResultPanel" style=""></div>-->
</body>
</html>
<script type="text/javascript">
    var title = [];
    var address = [];
    var points = [];
    var currentPoint = "";
    var currentAddress = "";
    var isLocated = false;
    var isdispatching = true;//是否配送
    //var d = 2000;//配送范围,圆的半径
    var basePoint = new BMap.Point(116.331398,39.897445);//仓库的位置
    // 百度地图API功能
    var map = new BMap.Map("l-map"); // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.331398,39.897445),14);
    map.addEventListener("moveend",showCurrentPoi);
    map.setDefaultCursor("crosshair");

    //自动定位
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            currentPonit = r.point;
            isLocated = true;
            map.centerAndZoom(r.point,14);
            map.panTo(r.point);
            // 创建地理编码实例
            var myGeo = new BMap.Geocoder();
            // 根据坐标得到地址描述
            myGeo.getLocation(r.point, function(result){
                if (result){
                    currentAddress = result.address;
                }
            });
        } else {
            alert("定位失败:"+this.getStatus());
        }
    },{enableHighAccuracy: true})

    //自动完成
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {"input" : "suggestId",
                "location" : map
            });
    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        //alert("1:"+_value.province+"2:"+_value.city+"3:"+_value.district+"4:"+_value.street+"5:"+_value.business);
        showPoiFromKeyword();
    });

    function showPoiFromKeyword(){
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: function(results){
                if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                    var point = local.getResults().getPoi(0).point;
                    var title = local.getResults().getPoi(0).title;
                    var address = local.getResults().getPoi(0).address;
                    isdispatching = true;

                }
            }
        });
        local.search(myValue);
    }

    function showCurrentPoi()
    {
        var center = map.getCenter();
        var local = new BMap.LocalSearch(map, {
            renderOptions: {selectFirstResult:true},
            onSearchComplete:function(results){
                if (local.getStatus() == BMAP_STATUS_SUCCESS){
                    var s = [];
                    var content = "";
                    content = " <ul class='mui-table-view'> ";
                    for (var i = 0; i < results.getCurrentNumPois(); i++) {
                        title[i] = results.getPoi(i).title;
                        address[i] = results.getPoi(i).address;
                        points[i] = results.getPoi(i).point;
                        var addressName = address[i]+title[i];
                        content = content +
                                " <li pointx='"+points[i].lng+"' pointy='"+points[i].lat+"' addressName='"+addressName+"' onclick='selectMap(this);' class='mui-table-view-cell mui-media'> <a href='javascript:confirmAddress(" + i + ");'>  <a id='icon-location' class='mui-media-object mui-pull-left'><span style='color:red' class='mui-icon mui-icon-location'></span></a> <div class='mui-media-body'>" +
                                title[i] + "<p class='mui-ellipsis'>" +
                                address[i] + "</div> </a> </li>";
                    }
                    content = content + " </ul>";
                    document.getElementById("r-result").innerHTML = content;
                }
            }
        });
        var myGeo = new BMap.Geocoder();
        myGeo.getLocation(center, function (result) {
            if (result) {
                local.search(result.address);
            }
        });
    }

    function confirmAddress(i) {
        //用户单击某一项之后,跳转会页面,同时将地址传递过去
        isdispatching = true;
    }

    function selectMap(obj){
        var messageId = $("#messageId").val();
        var commentText = $("#commentText").val();
        var addressX = $(obj).attr("pointx");
        var addressY = $(obj).attr("pointy");
        var addressName = $(obj).attr("addressName");
        location.href = "/h5/comment/add?messageId="+messageId+"&addressX="+addressX+"&addressY="+addressY+"&addressName="+addressName+"&commentText="+commentText;
    }
</script>


效果图:



版权声明:本文为u010363836原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010363836/article/details/72782718

智能推荐

ActiveMQ学习4-ActiveMQ的安全机制和集群模式

ActiveMQ的安全机制和集群模式 20 ActiveMQ安全机制 20.1 Web 控制台安全 20.2 消息服务器Broker安全 21 ActiveMQ主从集群 21.1 使用集群的重要性 20.2 主从集群的方式 20.2.1 shared filesystem Master-Slave方式主从集群 20.2.2 shared database Master-Slave方式主从集群 20...

说说 Python Django 应用的基础目录结构

通过以下 django-admin 指令创建应用之后,就会生成应用的基础目录结构。 比如,我们建立了一个叫 ‘first’ 的应用,它的目录结构是这样的: 目录或文件 说明 最外层的 first/ 这是新应用的根目录,所有与该应用相关的内容都放在这里。 manage.py 用于管理 Django 项目的命令行工具。 里面一层的 first/ 目录 是一个...

Springboot整合rabbitMQ

依赖: 配置文件application.yml RabbitConfig 消息生产者RabbitProducer 消息消费者RabbitCustomer 通过Controller进行调用 启动项目后调用接口: 结果:...

Thread.join()方法的使用

如果一个线程A执行了thread.join()语句,代表当前线程A等待thread线程终止后才从thread.join()方法返回 并且这个方法具有超时特性,可以添加参数设置 输出结果: jdk中Thread.join()方法的源码(进行了部门调整)   每个线程终止的条件是前驱线程的终止,每个线程等待前驱线程终止后,才从join()方法返回,  当线程终止时,会调用自身的no...

linux服务器部署jenkins笔记

安装jenkins参考文档:https://blog.csdn.net/tomatocc/article/details/83930714 1. 打开jenkins官网:https://jenkins.io/download/ 将war包下载到本地 **ps:**这里要注意的是要下载左边下方的war包,不要下载右边下面的war包。左边是稳定版本,右边是最新版本,建议大家使用稳定版本(我刚开始下载的...

猜你喜欢

k8s部署elasticsearch集群

百度营销大学     环境准备 我们使用的k8s和ceph环境见: https://blog.51cto.com/leejia/2495558 https://blog.51cto.com/leejia/2499684 ECK简介 Elastic Cloud on Kubernetes,这是一款基于 Kubernetes Operator 模式的新型编排产品,用户可使用该产品在...

saas-export项目-AdminLTE介绍与入门

AdminLTE介绍 (1)AdminLTE是什么? AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具 (2)AdminLTE有什么特点? 提供一系列响应的、可重复使用的组件, 并内置了多个模板页面 自适应多种屏幕分辨率,兼容PC和移动端 快速的创建一个响应式的Html5网站 AdminLTE 不但美观, 而且可以免去写很大CSS与JS的工作量 AdminLTE...

MyBatis中ResultMap结果集映射

用于解决属性名和字段名不一致的情况: resultMap 元素是 MyBatis 中最重要最强大的元素。...

编写一个shell

编写shell的过程: 1.从标准输入中读入一个字符串。 2.解析字符串 3.创建一个子进程的执行程序。 4.子进程程序替换。 5.父进程等待子进程退出。...

WEB自动化测试中Xpath定位方法

前言: Xpath是在XML文档中查找信息的一种语言,使用路径表达式来选取XML文档中的节点或节点集,由于XML与HTML结构类似(前者用于传输数据,后者用于显示数据),所以Xpath也常用于查找HTML文档中的节点或节点集。 一  路径表达式: 路径以“/”开始     表示找到满足该绝对路径的元素; 路径以//”开始  ...