百度地图api
来源:互联网 发布:mac如何卸载opera 编辑:程序博客网 时间:2024/06/06 03:35
今天把公司的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); //跳动的动画 });}//异步调用百度jsfunction 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】
- 百度地图api开源
- 百度地图API 应用
- 百度地图API
- 百度地图API
- 百度地图API应用
- 百度地图API使用
- 百度地图API
- 百度地图API实例
- 百度地图API
- 百度地图API
- android 百度地图api
- 百度地图 JavaScript API
- 百度地图API配置
- 百度地图API使用
- 百度地图API
- 百度地图API 源码
- 神经网络浅析
- 【HDU】 1431 素数回文
- new一个对象的过程
- Package.json中dependencies依赖包中^符号和~符号前缀的区别
- Easy-题目47:20. Valid Parentheses
- 百度地图api
- VS2015找不到stdlib.h的问题
- Spring.No1 ----整理---Spring学习的第一课
- 多模匹配算法之Aho-Corasick
- shell(三)
- 如何创建一条可靠的实时数据流
- Dhroid框架六大组件之视图注入
- Easy-题目48:299. Bulls and Cows
- Maven 修改context path