<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <style type="text/css"> html,body{ width:100%; height:100%; } *{ margin:0px; padding:0px; } body, button, input, select, textarea { font: 12px/16px Verdana, Helvetica, Arial, sans-serif; } p{ width:603px; padding-top:3px; overflow:hidden; } #container{ min-width:600px; min-height:767px; } .btn{ width:142px; } </style> <title>点击地图获取当前经纬度</title> </head> <body> <input style="width:200px;padding:3px 4px;" type="text" id="place" placeholder="请输入地址"/> <input style="width:200px;padding:3px 4px;" type="text" id="address_input" value="" placeholder="腾讯地址"> <input style="width:120px;padding:3px 4px;" id="lng_input" type="number" value="{$lng}" placeholder="经度"/> <input style="width:120px;padding:3px 4px;" id="lat_input" type="number" value="{$lat}" placeholder="纬度"/> <input id="city_input" type="hidden"/> <input id="province_input" type="hidden"/> <input id="district_input" type="hidden"/> <div id="container"></div> <script> var markersArray = []; var searchService,markers = []; function init() { //设置地图中心点 var myLatlng = new qq.maps.LatLng({$lat}, {$lng}); //定义工厂模式函数 var myOptions = { zoom: 16, //设置地图缩放级别 center: myLatlng, //设置中心点样式 mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType } //获取dom元素添加地图信息 var map = new qq.maps.Map(document.getElementById("container"), myOptions); //实例化自动完成 var ap = new qq.maps.place.Autocomplete(document.getElementById('place')); //设置Poi检索服务,用于本地检索、周边检索 searchService = new qq.maps.SearchService({ //检索成功的回调函数 complete: function(results) { //设置回调函数参数 var pois = results.detail.pois; var infoWin = new qq.maps.InfoWindow({ map: map }); var latlngBounds = new qq.maps.LatLngBounds(); for (var i = 0, l = pois.length; i < l; i++) { var poi = pois[i]; //扩展边界范围,用来包含搜索到的Poi点 latlngBounds.extend(poi.latLng); (function(n) { var marker = new qq.maps.Marker({ map: map }); marker.setPosition(pois[n].latLng); marker.setTitle(i + 1); markers.push(marker); qq.maps.event.addListener(marker, 'click', function() { infoWin.open(); infoWin.setContent('<div style="width:280px;height:80px;">名称:' + pois[n].name + '<br/><br/>地址:' + pois[n].address + '</div>'); infoWin.setPosition(pois[n].latLng); document.getElementById('address_input').value=pois[n].address; document.getElementById('lng_input').value=pois[n].latLng.lng; document.getElementById('lat_input').value=pois[n].latLng.lat; }); })(i); } //调整地图视野 map.fitBounds(latlngBounds); }, //若服务请求失败,则运行以下函数 error: function() { alert("出错了。"); } }); //添加监听事件 qq.maps.event.addListener(ap, "confirm", function(res){ clearOverlays(markers); searchService.search(res.value); }); geocoder = new qq.maps.Geocoder({ complete : function(result){ document.getElementById('address_input').value=result.detail.address; document.getElementById('province_input').value=result.detail.addressComponents.province; document.getElementById('city_input').value=result.detail.addressComponents.city; document.getElementById('district_input').value=result.detail.addressComponents.district; } }); geocoder.getAddress(myLatlng); var marker = new qq.maps.Marker({ position: myLatlng, map: map }); markersArray.push(marker); var listener=qq.maps.event.addListener(map, 'click', function(event) { deleteOverlays(); var myLatlng = new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng()); var marker = new qq.maps.Marker({ position: myLatlng, map: map }); geocoder.getAddress(myLatlng); markersArray.push(marker); var lng=event.latLng.getLng(); var lat=event.latLng.getLat(); document.getElementById('lng_input').value=lng.toFixed(6); document.getElementById('lat_input').value=lat.toFixed(6); }); } function deleteOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } markersArray.length = 0; } } //清除地图上的marker function clearOverlays(overlays) { var overlay; while (overlay = overlays.pop()) { overlay.setMap(null); } } //异步加载地图库函数文件 function loadScript() { //创建script标签 var script = document.createElement("script"); //设置标签的type属性 script.type = "text/javascript"; //设置标签的链接地址 script.src = "https://map.qq.com/api/js?v=2.exp&callback=init&libraries=place"; //添加标签到dom document.body.appendChild(script); } window.onload = loadScript; // dom文档加载结束开始加载 此段代码 function confirm() { var data = {}; data.lng = document.getElementById("lng_input").value; data.lat = document.getElementById("lat_input").value; data.address = document.getElementById("address_input").value; data.city = document.getElementById("city_input").value; data.province = document.getElementById("province_input").value; data.district = document.getElementById("district_input").value; return data; } </script> </body> </html>