关闭

百度地图api

标签: 百度地图api
312人阅读 评论(0) 收藏 举报
分类:

今天把公司的ERP项目中引入百度地图的任务搞定了,感觉很开心。希望再接再厉吧。fight.
不多说,先贴代码

<script  type="text/javascript">
        $('#location').on('click',function(){
            layer.open({//调用layer弹出层 
                type: 2,
                title: '地图位置',
                scrollbar: false,
                maxmin: false,
                shadeClose: false, //点击遮罩关闭层
                area : ['1000px' , '500px'],
                content: '${ctx}/office.action?method:getLocation'

            });
        });
    </script>

通过调用layer弹出框到’${ctx}/office.action?method:getLocation’即执行OfficeAction下的getLocation方法,通过getLocation的返回值映射到对应的jsp文件。显示出视图

<%@ page language="java" pageEncoding="utf-8" import="java.util.*"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图API</title>
<%@ include file="/common/meta_ace.jsp"%>
<!--css-->
<!--javascript-->
</head>
<body>
<%
        String lon = request.getParameter("lon"); 
        String lat = request.getParameter("lat"); 
        String x="";
        String y="";

        if(lon != null && !lon.isEmpty()&&!lat.isEmpty()){
            double[] lonlat={Double.parseDouble(lon),Double.parseDouble(lat)};
            double[] coordinate=AppUtils.lonlatToMapXY(lonlat);
            x=coordinate[0]+"";
            y=coordinate[1]+"";
        }


        String address = request.getParameter("address"); 

    %>
    <input id="map_lontitude" type="hidden" value=<%=lon%> />
    <input id="map_latitude" type="hidden" value=<%=lat%> />
    <input id="map_x" type="hidden" value=<%=x%> />
    <input id="map_y" type="hidden" value=<%=y%> />
    <input id="address" type="hidden" value=<%=address%> />

<form action="${ ctx}/erp/office.action" method="post">

<input type="hidden" name="pageNo" value="${ param.pageNo}"/>
<input type="hidden" name="pageSize" value="${ param.pageSize}"/>
<input type="hidden" name="conditionStr" value="${ conditionStr}"/>
<input type="hidden" name="office.id" value="${ office.id}"/>

    <div class="main-container">
    <div style="width: 730px; margin: auto;">

        <input type="text" name="office.address" id="office_address" value="${ office.address}" class="input-large "/>
        <button type="button" id="location"  onclick="search()" class="btn btn-sm btn-primary" title="地图显示该客户位置 ">
                        搜索
                </button>
         查询结果(经纬度):<input id="result_" type="text" />
         <button type="submit" id="confirm" class="btn btn-sm btn-primary savaBtn" name="method:save">确认</button>
        <div id="container"
            style="position: relative; width: 730px; height: 590px; border: 1px solid gray; overflow: hidden;">
        </div>
    </div>
    </div>
</body>

<script type="text/javascript">


var lontitude = document.getElementById("map_lontitude").value;
var latitude = document.getElementById("map_latitude").value;
var mapx = document.getElementById("map_x").value;
var mapy = document.getElementById("map_y").value;
var address = document.getElementById("address").value;
var ids=[];
var addrs=[];
var names=[];
var lons=[];
var lats=[];
var mapxs=[];
var mapys=[];
var keyword ;
var local ;
var lng;
var lat;
var newaddress;


 //关键字搜索
function search(){
     keyword = document.getElementById("office_address").value;
     local.search(keyword);
}  
function map_init1() {
    var map = new BMap.Map("container"); // 创建Map实例
    var point = new BMap.Point(mapx, mapy); //地图中心点
    map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
    local = new BMap.LocalSearch(map, {renderOptions:{map: map}});

    local.enableAutoViewport(); //允许自动调节窗体大小

    map.clearOverlays();//清空原来的标注

    local.setSearchCompleteCallback(function (searchResult) {
        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象

                {"input" : "office_address"

                ,"location" : map

                });
        var poi = searchResult.getPoi(0);
        document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
        map.centerAndZoom(poi.point, 13);
        map.enableScrollWheelZoom(true); //启用滚轮放大缩小
        //向地图中添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor : BMAP_ANCHOR_TOP_LEFT,
            type : BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);

        //向地图中添加缩略图控件
        var ctrlOve = new window.BMap.OverviewMapControl({
            anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen : 1
        });
        map.addControl(ctrlOve);

        //向地图中添加比例尺控件
        var ctrlSca = new window.BMap.ScaleControl({
            anchor : BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);


        var myIcon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(23, 25), {  
            offset: new BMap.Size(10, 25), // 指定定位位置  
            imageOffset: new BMap.Size(0, 0 - 1* 20) // 设置图片偏移  
        });    
        var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat),{icon: myIcon});  // 创建标注,为要查询的地方对应的经纬度
        map.addOverlay(marker);
        <%--var content = document.getElementById("office_address").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;
        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");--%>


        marker.enableDragging();  //设置可拖拽
        var geoc = new BMap.Geocoder();    
    marker.addEventListener("dragend", function(e) { //拖动事件 

                        var pt = e.point;
                        var dizhi;
                        geoc.getLocation(pt, function(rs) {
                            var addComp = rs.addressComponents;
                            dizhi = addComp.city + addComp.district
                                    + addComp.street + addComp.streetNumber;
                            document.getElementById('office_address').value = dizhi;//更新地址数据
                            var content = dizhi + "<br/><br/>经度:" + e.point.lng
                                    + "<br/>纬度:" + e.point.lat;
                            var infoWindow = new BMap.InfoWindow(
                                    "<p style='font-size:14px;'>" + content
                                            + "</p>");
                            marker.openInfoWindow(infoWindow, map.getCenter());//将经纬度信息显示在提示框内

                        });

                        document.getElementById("result_").value = e.point.lng
                                + ", " + e.point.lat;//打印拖动结束坐标  

                    });
<%--marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });--%>
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    });


}

//异步调用百度js
function map_load() {
    var load = document.createElement("script");

    load.src = "http://api.map.baidu.com/api?v=2.0&ak=82a696555f77c2afe26c32007de3800e&callback=map_init1()";

    document.body.appendChild(load);
}
window.onload = map_load;

</script>
</form>
</html>

效果为,可以生成一个自定义的标注,并且可以拖动标注,在拖动的同时,会自动生成对应的经纬度。这个不错,对于需要精确定位的比较有用。

0
0
查看评论

百度地图API 密钥

百度地图API 密钥:DD279b2a90afdf0ae7a3796787a0742e
  • meimeieee
  • meimeieee
  • 2015-06-07 12:11
  • 9258

百度地图API实例教程

这几天比较空闲,就接触了下百度地图API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的。只要简单几步注册下,就可以获得一个Key,就能直接调用(PS:好像1.3版本前的无需注册获取key,就能直接调用api)。   想着能结合到自己的项目中去,那...
  • Time_Song
  • Time_Song
  • 2014-11-18 20:57
  • 4152

百度地图API地点搜索

百度地图API地点搜索-获取经纬度DEMO 地点: 经纬度: var map = new BMap.Map("container");//在指定的容器内创建地图实例 map.setDefaultCursor(...
  • xiyang_1990
  • xiyang_1990
  • 2013-11-18 14:23
  • 2738

详解百度地图API之驾车导航

转自:http://developer.51cto.com/art/201109/294237.htm 本文将向大家介绍如何使用百度地图API提供的驾车导航服务进行开发。包括代码实现和截图展示。 AD:干货来了,不要等!WOT2015 北京站演讲PPT开放下载! ...
  • chelen_jak
  • chelen_jak
  • 2015-05-06 09:59
  • 11840

百度地图离线API2.0(含示例,可完全断网访问)

PS:如百度地图瓦片匹配不上则请使用google瓦片作为底图(有人反应说下载的百度瓦片对不上,有人又说对得上,可能瓦片下载软件版本不一样吧),转换google瓦片的java代码:Google瓦片转百度瓦片 完整示例代码(缺JS)下载,瓦片也是转过的.  http://pan.b...
  • leiyong0326
  • leiyong0326
  • 2015-01-08 18:15
  • 18071

百度地图(截图)

以下提供主要代码和思路: 1.根据传过来的经纬度,来标记: LatLng latLng = new LatLng(Double.parseDouble("经度"),Double.parseDouble("维度")); BitmapDescriptor ...
  • fangjingjingll
  • fangjingjingll
  • 2015-12-16 14:17
  • 1789

让百度地图全屏的js

function initialize() { changeSize(); var map = new BMap.Map('map'); var point = new BMap.Point(116.404844, 39.923125); map.ce...
  • waysoflife
  • waysoflife
  • 2014-05-14 08:56
  • 4268

百度地图api路况信息

首先需要引入css\jslink href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="...
  • ml_yz
  • ml_yz
  • 2017-08-02 12:48
  • 1818

百度地图API开发demo地址

此次开发的GPS车辆人员定位系统中,涉及到的开发内容重点有:1、车辆实时定位:要求页面每10s刷新一次,显示车辆最后一次位置,地图上的所有车辆点击可查看车辆的实时运行信息,如速度、方向以及基础信息,选择某个车辆可以开始跟踪该车辆的行驶路线。2、车辆轨迹回放:根据某个时间段,选择某辆车,进行轨迹回放。...
  • taomanman
  • taomanman
  • 2015-04-27 14:03
  • 16686

百度地图API的缩放控件,比例尺控件

//隐藏地图中的缩放控件 int childCount = mMapView.getChildCount(); View zoom_SF = null; for (int i = 0; i < childCount; i++) { Vie...
  • qq_22120329
  • qq_22120329
  • 2016-02-25 16:39
  • 2911
    个人资料
    • 访问:40804次
    • 积分:1205
    • 等级:
    • 排名:千里之外
    • 原创:83篇
    • 转载:8篇
    • 译文:0篇
    • 评论:7条
    文章分类