108 lines
3.6 KiB
HTML
108 lines
3.6 KiB
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;}
|
||
</style>
|
||
<script type="text/javascript" src="http://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"/>
|
||
|
||
<div style="position: relative;">
|
||
<input id="suggestId" type="text" placeholder="请输入地址"/>
|
||
<div id="allmap"></div>
|
||
</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){
|
||
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);
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|