| JS获取经韦坐标地图map |
| 来源：智睿 浏览：1105 次 发布时间：2020-04-19 09:03:23 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0FuoX30MFf7YMrdS5Wi9GGAcHBblKDuu"></script>
</head>
<body>
<input name="address" value=""id="where" class="case_text" type="text">
</div>
<div style="display: inline" onClick="sear(document.getElementById('where').value);" >
搜索
</div>
</div>
<div class="zerocard_add_ys">
<span class="color_dh">*</span>
<span>经度：</span>
<div class="box_input">
<input name="longitude" value=""id="lng" class="case_text" type="text">
</div>
<div class="format2">
<span class="color_dh">*</span>
<span>纬度：</span>
</div>
<div class="box_input">
<input name="latitude" value=""id="lat" class="case_text" type="text">
</div>
</div>
<br />
<h1>功能介绍</h1>
1，自动定位当前位置；(可能要等一会儿)<br>
2，搜索功能<br>
3，点击地图 小红点标记，<br>
4，点击地图获取当前位置，和当前坐标<br><br>
<div style="width:100%;height:340px;border:1px solid gray" id="container"></div>
<script>
var is_empty =0
lng = 116.404;
lat = 39.915;
var map = new BMap.Map("container");//在指定的容器内创建地图实例
map.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式
map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用。
var point =new BMap.Point(lng,lat)
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
var marker = new BMap.Marker(point); // 创建标注
this.map.addOverlay(marker);
map.addEventListener("click", function(e){//地图单击事件
var geocoder = new BMap.Geocoder();
var point = new BMap.Point(e.point.lng,e.point.lat);
geocoder.getLocation(point,function(geocoderResult,LocationOptions){
map.clearOverlays()
map.addControl(new BMap.NavigationControl());
var marker = new BMap.Marker(point); // 创建标注
this.map.addOverlay(marker);
//定位成功
var address = geocoderResult.address;
document.getElementById("where").value =address
layer.msg('定位成功');
// $('#suggestId').val(geocoderResult.address);
});
document.getElementById("lng").value = e.point.lng;
document.getElementById("lat").value = e.point.lat;
});
function iploac(result){//根据IP设置地图中心
var cityName = result.name;
map.setCenter(cityName);
}
if(is_empty ==0){
// var myCity = new BMap.LocalCity();
// myCity.get(iploac);
dingwei()
}
function dingwei() {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
document.getElementById("lng").value = r.point.lng;
document.getElementById("lat").value = r.point.lat;
var city_name =r.address.province + r.address.city;
document.getElementById("where").value = city_name
}
else {
console.log('获取失败');
}
});
}
function sear(result){//地图搜索
if(result.length ==0){
dingwei();
return false
}
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search(result);
}
</script>
</body>
</html>
链接: https://pan.baidu.com/s/1Soj3zf7whgj13dLU3IPKUA 提取码: j1jw |
| 【刷新页面】【加入收藏】【打印此文】 【关闭窗口】 |
| 上一篇：智睿网络投票评选管理系统 V 10.7.9 优秀评选大赛系统,年度优秀评选活动系统 下一篇：智睿录取查询报名系统 V 10.0.6 2020年全新录取查询系统 秋季招生系统 |
