百度地图api的调用实例

最新推荐文章于 2020-01-06 14:19:03 发布

swimming_in_it_

最新推荐文章于 2020-01-06 14:19:03 发布

阅读量1k

点赞数

分类专栏：前端插件+框架文章标签：百度地图 web 实例详解 demo

本文链接：https://blog.csdn.net/swimming_in_IT_/article/details/78860415

版权

前端插件+框架专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在我们写项目的时候，难免会需要地图查找等东西，下面展示一个百度地图的搜索和标注等使用的demo。以供参考

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/JavaScript" src="http://api.map.baidu.com/api?v=1.3"></script>
	</head>
	<body>
		<input type="text" value="" id="keyword" />
        <input type="button" name="" id="" value="查询" οnclick="search()" />
		<div id="baiduMap" style="width: 400px;height:400px"></div>
         <p id="aa"></p>
        <script type="text/javascript">
            var map = new BMap.Map("baiduMap"); // 创建地图实例
            var point = new BMap.Point(112.556344, 32.975733); // 创建点坐标也就是地图默认显示的哪一个区域
            map.enableScrollWheelZoom();   //启动鼠标中键控制地图缩放
            map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
            map.enableContinuousZoom();    // 开启连续缩放效果
            map.enableInertialDragging(); // 开启惯性拖拽效果
            map.addControl(new BMap.NavigationControl()); //添加缩放平移控件
            map.addControl(new BMap.ScaleControl());//添加比例尺控件
            map.addControl(new BMap.OverviewMapControl());//添加缩略图控件
            //设置标注的图标
            var icon = new BMap.Icon('img/mark.png', new BMap.Size(20, 32), {
                anchor: new BMap.Size(10, 30)
            });
			//设置标注的经纬度出现图标的地方
            var mkr = new BMap.Marker(new BMap.Point(112.559362, 32.973916), {
                icon: icon
            });
            //把标注添加到地图上
            map.addOverlay(mkr);
            //点击标注，显示信息
            var content = "<table>";  
                content = content + "<tr><td> 编号：001</td></tr>";  
                content = content + "<tr><td> 地点：南阳理工软件学院</td></tr>"; 
                content = content + "<tr><td> 时间：2017-12-21</td></tr>";  
                content += "</table>";
            var infowindow = new BMap.InfoWindow(content);
            mkr.addEventListener("click",function(){
                this.openInfoWindow(infowindow);
            });
            //点击地图，获取经纬度坐标
            map.addEventListener("click",function(e){
                document.getElementById("aa").innerHTML = "经度坐标："+e.point.lng+"  纬度坐标："+e.point.lat;
            });
            //关键字搜索
            function search(){
                var keyword = document.getElementById("keyword").value;
                var local = new BMap.LocalSearch(map, {
                	renderOptions:{map: map}
            	});
            	local.search(keyword);
            }
        </script>
	</body>
</html>