常见的js效果（二）之高德地图的应用
来源：互联网 发布：淘宝直通车怎么退钱 编辑：程序博客网 时间：2024/05/29 16:19
今天我要说的是关于高德地图的应用，我问过我周边的小伙伴，没有实际操作经验的小伙伴都告诉我有接口啊，有API啊，很简单啊，我没说话；我问他们你们知道怎么后后台对接数据吗，有人居然跟我说不要数据对接。我并没有其他的意思，我只是想说，如果没有实操，还是说话谦虚一点会比较好，不然还是比较尴尬的，此处省略尴尬歌。
好的，下面我们首先看一下最终实现的效果图：
看起来好像很简单的功能其实内有奥妙。我先来说一下这个需求，然后讲讲解决问题的思路，最后再展现我们的代码。
说一下需求，其实根据这个图就知道，当我选择了经营地址的时，下面就会自动定位并标注，当我们点击其他的地址时，经营地址和详细地址就会自动改变。
然后讲一下思路，其实我的博客每次我都要说一下需求和思路，是因为，需求可以变，但思路也要随着需求的改变而改变。了解了需求之后，我定位了下面这几点：
1.首先详细地址键入内容时，得到经营地址和详细地址，如果找到就自动定位到那个地点，并进行标注，如果没有找到，就定位到选择到的省市区，
2.其次就是当我点击地图上的点时，得到它的坐标，后台就直接返回地址，我们得到地址之后，如果地址和上面经营地址不一致，就把省市区下拉框里面选中的地址和详细地址替换成现在点击之后的地址，当然也要添加标注
3.因为键盘键入内容以及点击地图上的坐标时多会用到添加标注，所以在添加标注之前要先判断有没有标注，有就清空标注再添加
讲一下高德地图的一些小的知识点：
1.首先说一下zoom级别：zoom是高德地图的缩放级别，级别区间是【4,20】，其实就是一个比例尺的问题，级别越大，缩放比例越小
2.然后说一下 ResizeEnable，这个属性是说可以调整任意窗口大小
3.如果center和level值没有设置的话，默认会是3D的
4.在GIS应用中，很多需要将经纬度转化为地址或者将地址转化为经纬度的，高德地图里面使用Geocoder 服务插件来完成,一开始没有做的时候一直以为是后台数据传的，现在知道是API自动插件转化的，这样就简便了使用
最后就是大家比较关心的代码阶段，直接贴在下面，有需要的朋友可以参考，当然里面还是有一些问题的，因为没有数据的绑定，省市区的级联我都是用的插件：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>地址详情得到焦点时，把地址选中的地址找到</title> <link rel="stylesheet" href="../../css/Common/base.css"> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=23eb8cbd678e6bc1eb10f24676028131"></script> <style> input,select{outline: none;} .formBox{width: 600px;margin: 50px auto;color:#333;font-size: 14px;} .area{width: 100px;height: 30px;margin-right:8px;color:#666;line-height: 30px;border:1px solid #999;} .address{width: 300px;height: 30px;margin:10px 0;padding:0 10px;line-height: 30px;} #mapContainer{display:none;width: 500px;height: 400px;} </style></head><body><form class="formBox"> <div data-toggle="distpicker"> <select class="area" id="province"></select> <select class="area" id="city"></select> <select class="area" id="district"></select> </div> <input type="text" class="address" id="address" placeholder="请填写您的地址"> <div id="mapContainer"></div></form><div class="submit_box"> <input type="hidden" id="lngX" name="lngX" value=""/> <input type="hidden" id="latY" name="latY" value=""/> <input type="hidden" id="formattedAddress" value=""/> <input type="hidden" id="hidProvinceId" value=""/> <input type="hidden" id="hidCityId" value=""/> <input type="hidden" id="hidDistrictId" value=""/></div><script src="../../js/Common/jquery.js"></script><script src="../../js/plugin/distpicker/distpicker.data.js"></script><script src="../../js/plugin/distpicker/distpicker.js"></script><script src="../../js/Private/AddMap.js"></script></body></html>
$(function () { //initArea(); initMap();});//初始化地图function initMap() { // 标记 var marker; var infoWindow; var shopAddress = $("#formattedAddress").val(); //店铺的经纬度 var longitude = $("#lngX").val() || 0; var latitude = $("#latY").val() || 0; //地图显示属性 var mapViewOptions = {}; if (longitude != "0" && latitude != "0") { var iniPosition = new AMap.LngLat(longitude, latitude); mapViewOptions = { resizeEnable: true, center: iniPosition, zoom: 20 }; } else { mapViewOptions = { resizeEnable: true, zoom: 13 }; } //创建地图 var mapObj = new AMap.Map("mapContainer",{ resizeEnable: true, view: new AMap.View2D(mapViewOptions), keyboardEnable: false }); //创建点标记 if (longitude != "0" && latitude != "0") { var markerOption = { map: mapObj, position: new AMap.LngLat(longitude, latitude) }; marker = new AMap.Marker(markerOption); //显示窗体信息 infoWindow = new AMap.InfoWindow({ content: "<h3><font color=\"#00a6ac\"> 您所在位置 </font></h3>" + tipContents(shopAddress), size: new AMap.Size(300, 0), autoMove: true, offset: new AMap.Pixel(0, -30) }); infoWindow.open(mapObj, new AMap.LngLat(longitude, latitude)); } AMap.event.addListener(mapObj, 'click', function (e) { //获取地址 AMap.service('AMap.Geocoder', function () {//回调函数 var geocoder = new AMap.Geocoder({}); geocoder.getAddress(e.lnglat, function (status, result) { if (status === 'complete' && result.info === 'OK') { var gAddr = result.regeocode; var addrComponent = gAddr.addressComponent; var detailAddress = (addrComponent.township || "") + (addrComponent.street || "") + (addrComponent.streetNumber || "") + (addrComponent.building || ""); $("#address").val(detailAddress); // 获取经纬度 $("#lngX").val(e.lnglat.getLng()); $("#latY").val(e.lnglat.getLat()); // 重新初始化省市区 setAreaInfo(gAddr); setAddressInfo(gAddr, e.lnglat); } }); }); }); if ($.trim($("#address").val())) { $("#mapContainer").show(); } $("#address").blur(function() { var keyword = $.trim($(this).val()); if (keyword == "") { $("#mapContainer").hide(); } else { $("#mapContainer").show(); } }).change(function() { AMap.service('AMap.Geocoder', function() { //回调函数 var geocoder = new AMap.Geocoder({}); var province = $("#province").val() ? $("#province").find("option:selected").text() : ""; var city = $("#city").val() ? $("#city").find("option:selected").text() : ""; var district = $("#district").val() ? $("#district").find("option:selected").text() : ""; var detailAddr = document.getElementById('address').value; var address = province + city + district + detailAddr; geocoder.getLocation(address, function (status, result) { if (status === 'complete' && result.info === 'OK') { var gAddr = result.geocodes[0]; //获取经纬度 $("#lngX").val(gAddr.location.lng); $("#latY").val(gAddr.location.lat); setAddressInfo(gAddr, gAddr.location); } }); }); }); function setAreaInfo(regeocode) { var addrComponent = regeocode.addressComponent; var provinceName = addrComponent.province.replace('省', ''); provinceName = addrComponent.province.replace('自治区', ''); provinceName = addrComponent.province.replace('特别行政区', ''); var cityName = addrComponent.city; var districtName = addrComponent.district; var province = $("#province").val() ? $("#province").find("option:selected").text() : ""; var city = $("#city").val() ? $("#city").find("option:selected").text() : ""; var district = $("#district").val() ? $("#district").find("option:selected").text() : ""; if (province.indexOf(provinceName) == -1) { $("#province option").each(function () { if ($(this).text().indexOf(provinceName) != -1) { $(this).prop("selected", "selected"); $("#hidProvinceId").val($("#province").val()); return false; } }); } if (city.indexOf(cityName) == -1) { $("#city option").each(function () { if ($(this).text().indexOf(cityName) != -1) { $(this).prop("selected", "selected"); $("#hidCityId").val($("#city").val()); return false; } }); } if (district.indexOf(districtName) == -1) { $("#district option").each(function () { if ($(this).text().indexOf(districtName) != -1) { $(this).prop("selected", "selected"); $("#hidDistrictId").val($("#district").val()); return false; } }); } } function setAddressInfo(regeocode, location) { $("#formattedAddress").val(regeocode.formattedAddress); //清除点标注 if (marker) { marker.setMap(null); marker = null; } //添加点标注 marker = new AMap.Marker({ position: location }); marker.setMap(mapObj); infoWindow = new AMap.InfoWindow({ content: "<h3><font color=\"#00a6ac\"> 您所在位置 </font></h3>" + tipContents(regeocode.formattedAddress), size: new AMap.Size(300, 0), autoMove: true, offset: new AMap.Pixel(0, -30) }); infoWindow.open(mapObj, location); } function tipContents(address) { if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") { address = "暂无"; } var str = " 地址：" + address; return str; }}
阅读全文
0 0
- 常见的js效果（二）之高德地图的应用
- 高德地图Js API的使用
- 高德地图API的应用
- 国内地图坐标系介绍及常见地图（百度、高德、凯立德）之间的坐标系转换
- 国内地图坐标系介绍及常见地图（百度、高德、凯立德）之间的坐标系转换
- 高德地图组件在Android的应用以及Android与JavaScript的交互(二)
- 基于高德地图的应用开发-----DIY地图
- 常见的动画效果（二）
- [转]常见的动画效果（二）
- 常见的动画效果（二）
- 常见的动画效果（二）
- 常见的动画效果（二）
- Swift之高德地图的调用
- 与高德地图的一些恩怨（二）地图显示当前位置
- 高的地图之导航：
- 高德地图JS开发之入门
- IOS 关于内置高德地图的使用(二)
- 加载高德地图js和jquery冲突的问题
- 多线程相关文章
- 用webpack打包vue项目后，静态资源路径失效问题
- Android跳转各种系统设置界面-总结
- 第三周项目1-顺序表的基本算法
- java自带注解了解，自定义注解的实现，自定义注解的使用
- 常见的js效果（二）之高德地图的应用
- 下载 SharePoint Server 2016
- 开源EDA工具
- 抽象类不能继承接口
- 面向对象中常见的设计原则
- 最近遇到的面试题
- Spring-AOP 混合使用各种切面类型及不同切面总结
- 使用反射，在Excel导入时判断是否有空行
- 第3周【项目3
