实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>map最新地图导航</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=wWFsgDz7grOrY27jlRzr9opkaqdklG6c"></script>
<script src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
</head>
<style>
*{font-family: 微软雅黑;border: 0;margin: 0;padding: 0}
*{outline: none}
html{height:100%}
body{height:100%;}
#pl{width: 100%;height: 500px;}
.infoBoxContent{overflow: hidden;width: 300px;height: 300px;background: #fff; border-radius: 15px;}
ul{list-style: none;padding: 20px;color: #666;}
.title{text-align: center;line-height: 40px;}
a{text-decoration: none;}
.ss{position: fixed;top: 20px;z-index: 9999;left: 20%;width: 100%;height: 40px;}
.ss input,#but{width: 50%;height: 40px;float: left;}
#close{font-size: 28px;float: right;margin: 30px;z-index: 99999}
.sr{width: 60%;height: 40px;overflow: hidden;}
#results{width: 60%;height: 200px; overflow-y:scroll }
</style>
<body>
<div id="pl"></div>
<div class="ss">
<div class="sr"><input type="text" id="input"><button id="but">确定</button></div>
<div id="results"></div>
</div>
</body>
<script>
//一、
var map = new BMap.Map("pl"); // 创建地图实例
var point = new BMap.Point(0,0); // 创建点坐标
map.centerAndZoom(point, 20); // 初始化地图，设置中心点坐标和地图大小
//添加控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl()); // 启用放大缩小 尺
map.addControl(new BMap.GeolocationControl()); //移动端
//二、
var geolocation = new BMap.Geolocation();//地理位置
geolocation.enableSDKLocation();// 开启SDK辅助定位
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var myIcon = new BMap.Icon("icon.png", new BMap.Size(30,30));//设置图标信息
var mk = new BMap.Marker(r.point,{icon:myIcon});//创建标注对象
map.addOverlay(mk);
map.panTo(r.point);
//一来就展示地理位置
var myGeo = new BMap.Geocoder(); // 根据坐标得到地址描述
myGeo.getLocation(r.point, function(result){
if (result){
place=result.address;//返回的地理位置
var label = new BMap.Label(place,{offset:new BMap.Size(20,-10)});
mk.setLabel(label);
}
})
mk.enableDragging();// 开启拖拽功能icon
mk.addEventListener('dragend',function(e){//添加拖拽事件
myGeo.getLocation(e.point, function(result){
if (result){
place=result.address;//返回的地理位置
}
mk.addEventListener("click", function(e) {
map.removeOverlay(mk.getLabel());//删除之前的label
var label = new BMap.Label(rs.address,{offset:new BMap.Size(20,-10)});
mk.setLabel(label);
});
mk.addEventListener("dragend", function(e){ //icon拖拽事件
map.removeOverlay(mk.getLabel());//删除之前的label
var label = new BMap.Label(place,{offset:new BMap.Size(20,-10)});
mk.setLabel(label);
})
});
})
}
else {
alert('failed'+this.getStatus());
}
});
//搜索功能
$("#but").click(function(){
var local = new BMap.LocalSearch(map,
{renderOptions: {map: map,panel: "results"}});
local.searchInBounds($("#input").val(), map.getBounds());
$("#results").show();
})
map.addEventListener("dragend", function(e){//返回信息面板
$("#results").hide();
})
//自定义样式
var pl=[
{
"featureType": "land",
"elementType": "geometry",
"stylers": {
"color": "#212121"
}
},
{
"featureType": "building",
"elementType": "geometry",
"stylers": {
"color": "#2b2b2b"
}
},
{
"featureType": "highway",
"elementType": "all",
"stylers": {
"lightness": -42,
"saturation": -91
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"lightness": -77,
"saturation": -94
}
},
{
"featureType": "green",
"elementType": "geometry",
"stylers": {
"color": "#1b1b1b"
}
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": {
"color": "#181818"
}
},
{
"featureType": "subway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#181818"
}
},
{
"featureType": "railway",
"elementType": "geometry",
"stylers": {
"lightness": -52
}
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#313131"
}
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": {
"color": "#8b8787"
}
},
{
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
"color": "#1b1b1b"
}
},
{
"featureType": "local",
"elementType": "geometry",
"stylers": {
"lightness": -75,
"saturation": -91
}
},
{
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"lightness": -65
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"lightness": -40
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#8b8787",
"weight": "1",
"lightness": -29
}
}
]
map.setMapStyle({
styleJson:pl
});
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
