关于使用百度地图的一些使用方法

获取地区轮廓线 *//加入百度地图引用*

.schoolBtn{
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
border: none;
width: 60px;
height: 30px;
border-radius: 4px;
}

*地图显示的div*

//新建地图
var map = new BMap.Map(“container”);

*//默认地图中心北京的经纬度*
var point = new BMap.Point(116.331398,39.897445);

*//显示缩放图标和鼠标滚动功能*
  map.addControl(new BMap.NavigationControl());
  map.enableScrollWheelZoom(true)
  map.centerAndZoom(point,10);
  var lng = 0.0
  var lat = 0.0
  var citys = ''
  var movelng = 0.0
  var movelat = 0.0
  var clickres = {}
  var isCril = false
  var oldPoint = {}
  var oldcircle = []
  window.onload=function(){

*//根据输入框定位你要显示的位置*
var selCity = document.getElementById('province_select')
document.getElementById('localid').value = selCity.value
var index=selCity.selectedIndex
var value = selCity.options[index].value;

*//获取下拉框的值*
var cityLng = selCity.options[index].getAttribute('data-lng');
var cityLat = selCity.options[index].getAttribute('data-lat');
var points = new BMap.Point(parseFloat(cityLat),parseFloat(cityLng));
map.centerAndZoom(points, 8);

*//显示缩放图标和鼠标滚动功能*
map.addEventListener("dragend", function(){    
  var center = map.getCenter();   
  movelng = center.lng
  movelat = center.lat
  moveInfo ()
})

*//获取地图点击后的经纬度*
map.addEventListener("click", function(res){ 
  var lngs = res.point.lng
  var lats = res.point.lat
  getCity(lngs, lats, 2) 
})

 }

*//显示当前所在城市判断点击的和圆形覆盖物是不是重复*
  function getCity(lngs, lats, value) {
    var myGeo = new BMap.Geocoder();      
    // 根据坐标得到地址描述
    // 获取所有的圆信息
    var overlays = map.getOverlays();
    var ss = []
    var bb = []
    // 获取所有的圆到点击位置的距离
    for(var i=0;i<overlays.length;i++) {
      if(overlays[i].Ou){
        var s = map.getDistance(new BMap.Point(lngs, lats), new BMap.Point(overlays[i].point.lng, overlays[i].point.lat))
        ss.push(s)
        bb.push(overlays[i].point)
      }
    }
    var cc = ss.findIndex(function(n){
      return n < 1000
    })
    if (cc !== -1) {
    // 小于圆的半径添加信息窗口
      var opts = {    
        width : 250,     // 信息窗口宽度    
        height: 130,     // 信息窗口高度    
        title : '第 5405 家加盟校',  // 信息窗口标题
      }
      // 第 5405 家加盟校
      // 乐之学堂
      // 吉林省吉林市船营区北山街道解放中路222号船营区第四小学校
      // 2018-04-07 []
      var htmls = "<p>乐之学堂</p><p>吉林省吉林市船营区北山街道解放中路222号船营区第四小学校</p><p>2018-04-07 []</p>"
      var infoWindow = new BMap.InfoWindow(htmls, opts);
      map.openInfoWindow(infoWindow, new BMap.Point(bb[cc].lng, bb[cc].lat));
    } else {
    // 移除覆盖物
      var markers = new BMap.Marker();
      map.removeOverlay(oldPoint)
      map.removeOverlay(oldcircle)
      var marker = new BMap.Marker(new BMap.Point(lngs, lats));
      map.addOverlay(marker)

      var circle = new BMap.Circle(new BMap.Point(lngs, lats),1000)
      circle.setFillColor("blue"); //填充颜色
      circle.setStrokeWeight(1);//    设置圆形边线的宽度，取值为大于等于1的整数。
      circle.setFillOpacity(0.3);// 返回圆形的填充透明度。
      circle.setStrokeOpacity(0.3);// 设置圆形的边线透明度，取值范围0 - 1。
      map.addOverlay(circle);

  oldPoint = marker 
  oldcircle = circle 
  myGeo.getLocation(new BMap.Point(lngs, lats),function(result){    
      if (result){ 
        uplngs = lngs 
        uplats = lats 
        if (value === 1) {   
          citys = result.addressComponents.city
          document.getElementById('localid').value = citys
        } else {
          // map.centerAndZoom(new BMap.Point(lngs, lats), 15)
          var opts = {    
            width : 250,     // 信息窗口宽度    
            height: 200,     // 信息窗口高度    
            title : '签约地址：' + result.address,  // 信息窗口标题
          }
          clickres = result
          var htmls = "学校姓名：<input type='text' id='schoolName' class='schoolName'><br/>校长姓名：<input type='text' id='schoolPeople' class='schoolPeople'><br/>校长电话：<input type='text' id='schoolTel' class='schoolTel'><br/><button onClick='submitInfo()' class='schoolBtn'>加盟</button>"
          var infoWindow = new BMap.InfoWindow(htmls, opts);
          map.openInfoWindow(infoWindow, new BMap.Point(result.point.lng, result.point.lat));
        }
      }      
  });
}
}
function moveInfo() {
 // 添加原型标记
for(var i=0;i<5;i++) {
  movelng = movelng-0.1
  movelat = movelat-0.1
  var point = new BMap.Point(movelng, movelat);  // 创建点坐标  
  // map.centerAndZoom(point, 12)
  var marker = new BMap.Marker(point);// 创建标注   
  map.addOverlay(marker) 
  var circle = new BMap.Circle(point,1000)
  circle.setFillColor("blue"); //填充颜色
  circle.setStrokeWeight(1);//    设置圆形边线的宽度，取值为大于等于1的整数。
  circle.setFillOpacity(0.3);// 返回圆形的填充透明度。
  circle.setStrokeOpacity(0.3);// 设置圆形的边线透明度，取值范围0 - 1。
  map.addOverlay(circle);
}

}
function submitInfo () {
var a = document.getElementById(“schoolName”).value
var b = document.getElementById(“schoolPeople”).value
var c = document.getElementById(“schoolTel”).value
}
function searchMap() {
var address = document.getElementById(“serchid”).value
var selCity = document.getElementById(‘province_select’).value
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint(address, function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
},
selCity);
}

function newCity() {
var selCity = document.getElementById(‘province_select’)
document.getElementById(‘localid’).value = selCity.value
var index=selCity.selectedIndex
var value = selCity.options[index].value;
var cityLng = selCity.options[index].getAttribute(‘data-lng’);
var cityLat = selCity.options[index].getAttribute(‘data-lat’);
// map.removeOverlay(oldPoint)
point = new BMap.Point(cityLat,cityLng);
// oldPoint = new BMap.Marker(point)
map.centerAndZoom(point, 8);
// map.addOverlay(new BMap.Marker(point));
}

##实现百度地图标记添加,位置查找,和标记点到现在位置距离的判断

关于使用百度地图的一些使用方法

猜你喜欢