百度地图开发简单案例(源代码)

最新推荐文章于 2022-06-08 14:42:03 发布

置顶阿轮_

最新推荐文章于 2022-06-08 14:42:03 发布

阅读量5k

点赞数 2

分类专栏： Web 文章标签：百度 search function xhtml float input

本文链接：https://blog.csdn.net/lun379292733/article/details/7686225

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
   html{height:100%}
body{height:100%;margin:0px;padding:0px}
   #main{
float:left;
    height:95%;
width:100%;
   }
   #result{
    float:left;
    height: 95%;
    width: 0%;
   }
</style>
<title>无标题文档</title>
</head>

<body>
   <div id="main"></div>
   <div id="result"></div>
    <script type="text/javascript">
     //创建地图实例
     var map=new BMap.Map("main");

     //创建点坐标
     var point=new BMap.Point(108.95345,34.265865);

     //初始化地图，设置中心点坐标和地图级别
     map.centerAndZoom(point, 15);

     //向地图添加控件
     map.addControl(new BMap.NavigationControl()); //地图平移缩放控件，默认左上角
map.addControl(new BMap.OverviewMapControl({isOpen: 1})); //缩略地图控件，默认右下角
     map.enableScrollWheelZoom(true);        //启用鼠标滚动缩放地图
     map.enableKeyboard();        //启用键盘上下左右键移动地图


//创建标注 ,并将标注添加到地图中
var marker = new BMap.Marker(point);
map.addOverlay(marker);

//给标注添加事件
marker.addEventListener("click", function(e){
    map.openInfoWindow(infoWindow, e.point); //打开信息窗口
});

//启用标注拖拽功能,并及时获取标注最新位置
marker.enableDragging();
marker.addEventListener("dragend", function(e){
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);
})

//创建信息窗口对象
var opts = {
   width : 100,     // 信息窗口宽度
   height: 50,     // 信息窗口高度
   title : "这是钟楼" //信息窗口标题
}
var infoWindow = new BMap.InfoWindow("", opts);
    </script>
</body>
</html>

阿轮_

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
百度地图开发简单案例(源代码)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> http://api.map.baidu.com/api?v=1.3" type="text/javascript">http://ajax.googleapis.com/ajax/libs/jqu
复制链接

扫一扫

专栏目录