百度地图api的使用

最新推荐文章于 2023-02-14 03:00:00 发布

锅盖头-jack

最新推荐文章于 2023-02-14 03:00:00 发布

阅读量2.8k

点赞数 1

本文链接：https://blog.csdn.net/a3197588/article/details/18730373

版权

输入起点位置到达固定位置（一键导航）：

通过百度地图拾取坐标获取坐标位置，map.baidu.com/?latlng=坐标&title=‘成都’&content=‘成都高新区’&autoOpen=ture，----参数分别是：坐标、显示地图中的标题、内容；备注：终点可以在后台配置。

有很多网站用的有百度地图，所以自己也试了试：

百度地图api使用js实现的。首先你要在引入百度地图api的js 1.5版本以前的可以不要密钥，之后的版本要密钥。

//版本是1.4的

//1.5版本

之后给div一个id用于百度地图的显示。

<div id="container"></div> //百度地图显示位置
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(104.073025,30.664537); // 创建点坐标成都的
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableInertialDragging();//开启关系拖拽
map.enableScrollWheelZoom(); //开启鼠标滚动缩放
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
</script>
这样一个简单的百度地图就可以添加在你的页面中了。

添加复杂的覆盖物：

//返回的值

new BMap.Point(this.maplng,this.maplat),this.scount+'套',this.scount+"套|"+this.name);

                map.addOverlay(myCompOverlay);
            });
        },
        'error':function(data){
           alert('真失败');
        }
    });
    });

</script>

// 覆盖物添加完成

后台点击地图获取图标位置信息

marker.enableDragging(); // enableDragging和disableDragging方法可用来开启和关闭标注的拖拽功能。默认情况下标注不支持拖拽

//添加点击监听事件

marker.addEventListener("dragend", function(e){ //dragend 鼠标拖拽事件

//鼠标拖拽的x 和y赋值给input框
$("input[name='maplng']").val(e.point.lng);

$("input[name='maplat']").val(e.point.lat);
})

参考的百度地图的手册和案列

鼠标点击获取经纬度

实例1、

map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});

实例2、

map.addEventListener("click",moveinfo);

//具体函数

function moveinfo(e){
       $("#maplng").val(e.point.lng);
       $("#maplat").val(e.point.lat);
   }
}

本地搜索

//当点击旁边的按钮的时候进行查询
           $(".houseInfo4 .house_tag a").click(function(){
               var val = $(this).value();
               var local = new BMap.LocalSearch(map, {
                   renderOptions:{map: map, autoViewport: true}
                   });
                   local.searchNearby(val, pointer);
           });

   </script>

后台点击地图，添加覆盖物。

var map ;
$(function(){
   map = new BMap.Map("container");
   map.centerAndZoom(new BMap.Point(104.067923,30.679943),12);
   map.enableScrollWheelZoom();
   map.addEventListener("click",moveinfo);
});

function showMap(){
   var w_w = $(window).width(),
       w_h = $(window).height(),
       o_w = $("#mapdiv").width(),
       o_h = $("#mapdiv").height(),
       s_h = $(window).scrollTop(),
       s_w = $(window).scrollLeft();
   $("#mapdiv").css({
       left:s_w + (w_w-o_w)/2,
       top:s_h + (w_h-o_h)/2
   }).show();
}
var me=this;
var flag=0;
//添加覆盖物
function addMarker(point, index){ // 创建图标对象
   var myIcon = new BMap.Icon("http://api.map.baidu.com/images/markers.png", new BMap.Size(23, 25), {
       offset: new BMap.Size(10, 25),
       imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移
       });
   //将覆盖物添加到地图中
   var marker = new BMap.Marker(point, {icon: myIcon});
   me.marker=marker;
   map.addOverlay(me.marker);
   //鼠标拖动覆盖物
   marker.enableDragging();
   marker.addEventListener("dragend", function(e){
   $("input[name='maplng']").val(e.point.lng);
   $("input[name='maplat']").val(e.point.lat);
   })
}
//鼠标点击地图事件
function moveinfo(e){
   if(!me.marker||flag){
       addMarker(e.point,0);
       $("input[name='maplng']").val(e.point.lng);
       $("input[name='maplat']").val(e.point.lat);
       flag=0;
   }
}

锅盖头-jack

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度地图api的使用

有很多网站用的有百度地图，所以自己也试了试：百度地图api使用js实现的。首先你要在引入百度地图api的js 1.5版本以前的可以不要密钥，之后的版本要密钥。//版本是1.4的"http://api.map.baidu.com/api?v=1.4" type="text/javascript"> //1.5版本"http://api.map.baidu.com
复制链接

扫一扫