123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- <!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">
- body, html, #allmap {
- width: 100%;
- height: 100%;
- overflow: hidden;
- margin: 0;
- }
- #suggestId {
- position: absolute;
- z-index: 9999;
- right: 20px;
- top: 20px;
- line-height: 32px;
- padding: 0 10px;
- width: 300px;
- border: 1px solid #e4e6e7;
- }
- #suggestId:focus {
- outline: none;
- }
- </style>
- <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=KxkuAcGBup6sD1XxaDW85KBG"></script>
- <title>点击地图获取当前经纬度</title>
- </head>
- <body>
- <input id="lng_input" type="hidden" value="{$lng}"/>
- <input id="lat_input" type="hidden" value="{$lat}"/>
- <input id="address_input" type="hidden"/>
- <input id="city_input" type="hidden"/>
- <input id="province_input" type="hidden"/>
- <input id="district_input" type="hidden"/>
- <input id="suggestId" type="text" placeholder="请输入地址"/>
- <div id="allmap"></div>
- <script type="text/javascript">
- // 百度地图API功能
- var center = new BMap.Point({$lng}, {$lat});
- var map = new BMap.Map("allmap");
- map.centerAndZoom(new BMap.Point(116.404, 39.915), 8);
- map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
- map.enableContinuousZoom();
- var map_ac = new BMap.Autocomplete( //建立一个自动完成的对象
- {
- "input": "suggestId",
- "location": map
- });
- var marker = new BMap.Marker(center); // 创建标注
- map.addOverlay(marker); // 将标注添加到地图中
- marker.enableDragging(); //可拖拽
- //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
- map_ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
- var _value = e.item.value;
- function myFun() {
- var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
- map.centerAndZoom(pp, 8);
- marker.setPosition(pp);
- mgetLocation(pp);
- }
- myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
- var local = new BMap.LocalSearch(map, { //智能搜索
- onSearchComplete: myFun
- });
- local.search(myValue);
- });
- var opts = {
- width: 200, // 信息窗口宽度
- height: 30, // 信息窗口高度
- title: "", // 信息窗口标题
- enableMessage: false,//设置允许信息窗发送短息
- };
- var infoWindow = new BMap.InfoWindow("拖动我设置你的位置", opts); // 创建信息窗口对象
- marker.openInfoWindow(infoWindow);
- var gc = new BMap.Geocoder();
- function msetpoint(e) {
- document.getElementById("lng_input").value = e.point.lng;
- document.getElementById("lat_input").value = e.point.lat;
- marker.setPosition(new BMap.Point(e.point.lng, e.point.lat));
- mgetLocation(e.point);
- }
- function mgetLocation(point) {
- document.getElementById("lng_input").value = point.lng;
- document.getElementById("lat_input").value = point.lat;
- gc.getLocation(point, function (rs) {
- var addComp = rs.addressComponents;
- marker.openInfoWindow(new BMap.InfoWindow(rs.address, opts));
- document.getElementById("address_input").value = rs.address;
- document.getElementById("city_input").value = addComp.city;
- document.getElementById("province_input").value = addComp.province;
- document.getElementById("district_input").value = addComp.district;
- //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
- });
- }
- marker.addEventListener("dragend", msetpoint);
- map.addEventListener("click", msetpoint);
- function tilesloaded() {
- map.setCenter(center); //设置地图中心点。center除了可以为坐标点以外,还支持城市名
- mgetLocation(center);
- // map.setZoom(8); //将视图切换到指定的缩放等级,中心点坐标不变
- map.removeEventListener("tilesloaded", tilesloaded);
- }
- map.addEventListener("tilesloaded", tilesloaded);
- 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>
|