百度地图使用

AK获取

1.在百度地图开发者平台注册账号  https://lbsyun.baidu.com/

2.创建地图应用

3.获取AK

使用百度地图

1.引入js

<script>
     type="text/javascript"
     src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"
</script>

2.创建一个地图需要的容器(可以定义地图的宽高)

<div id="container"></div>
<style type="text/css">
       /*容器地图的宽高  */
      #container {
        height: 600px;
        width: 800px;
      }
</style>

3.初始化地图

var map = new BmapGL.Map("container")
var  point = new BmapGL.Point(经度,纬度)
map.centerAndZoom(point,16)

添加功能

可以对创建的地图添加很多的功能：鼠标滚动收缩、添加点、画圈、添加文本标注

1.鼠标滚动缩放

map.enableScrollWheelZoom(true);

2.添加点

var marker = new BMapGL.Marker(point);  
map.addOverlay(marker); 

也可以让添加的点链接起来

var lineArr = [];
        // 记录上一个个
        var last = null;
        // 添加事件      
        map.addEventListener("click",e=>{  
            //  有上一个就移除上一个
            last?map.removeOverlay(last):'';       
            // 获取单击点的位置(经度，纬度)
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat); 
            // 添加到数组组件
            lineArr.push(p);
            // 创建一个标记
            var m = new BMapGL.Marker(p); 
            // 重新定义上一个
            last = m;
            // 显示标记
            map.addOverlay(m);     

        })

再给鼠标添加事件让点击鼠标时让之前的点链接

map.addEventListener("dblclick",function(){
            tempMarker?map.removeOverlay(tempMarker):'';//如果有tempMarker就移除
			list.push(list[0]);//把第0个点复制一份添加到最后面
			// 绘制线
			var polyline = new BMapGL.Polygon(list, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5,fillColor:"#f00",fillOpacity:0.5})
			list = [];//清空list
			map.addOverlay(polyline);
})

完成这些后就得到如下效果的地图

3.添加控件

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);

        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        
        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);

 4.画圈

var circle = new BMapGL.Circle(point,1000,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
 map.addOverlay(circle);  

5.添加文本标注

var content = "<strong style='color:red'>中国</strong>";
        var label = new BMapGL.Label(content, {       // 创建文本标注
            position: point,                          // 设置标注的地理位置
            offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
        })  
        map.addOverlay(label);  

6.搜索

var map = new BMapGL.Map('container');
var point = new BMapGL.Point(113.6648,34.7835);
map.centerAndZoom(point,17);
//定义个本地地图搜索
var local = new BMapGL.LocalSearch(map,{
	renderOptions:{map:map}
})
 $(function(){
	 // 添加input事件
	 $(".keyword").on("input",function(e){
		 // 通过ajax请求服务器地址
		 $.ajax({
			 url:`https://api.map.baidu.com/place/v2/suggestion?query=${$(".keyword").val()}&region=郑州&city_limit=true&output=json&ak=3pu554R4LxktRbjImRnmwFqo7yIxI5yV`,
			 dataType:"jsonp" //类型jsonp
		 })
		 .then(res=>{
			 // 输出请求回来的内容
			 console.log(res);
			 var str = "";
			 //变量result累加str
			 for(var i=0;i<res.result.length;i++){
				 str+=`<div class="item">${res.result[i].name}</div>`
			 }
			 //设置thml
			 $(".tip").html(str);
		 })
	 })
			 
	 //单击tip 获取对应item的值,隐藏tip
	 $(".tip").on("click",".item",function(){
		 //使用代理方法,获取item内容
		 var str = $(this).text();
		 //输出
		 local.search(str); //搜索关键字
		 console.log(str,"this");
		 //清空tip
		 $(".tip").html("");
	 })
	 $.ajax({
		 url:"https://api.map.baidu.com/location/ip?ak=3pu554R4LxktRbjImRnmwFqo7yIxI5yV&ip=&coor=bd09ll",
		 dataType:"jsonp"
	 })
	 .then(res=>{
		 console.log(res);
		 $("body").append(`<p>${res.content.address}</p>`)
	 })
 })