应用百度地图API

最新推荐文章于 2023-01-03 14:25:13 发布

summer7310

最新推荐文章于 2023-01-03 14:25:13 发布

阅读量1.7k

点赞数

分类专栏：地图 GIS 文章标签：百度 java html

本文链接：https://blog.csdn.net/summer7310/article/details/27373123

版权

GIS 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

地图

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html> 
<html>
 <head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Hello, World</title> 
<script type="text/javascript" 
src="http://api.map.baidu.com/api?v=1.3"></script> </head> <body> 
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div> </body> </html> 
<script type="text/javascript"> 
var map = new BMap.Map("container");            // 创建Map实例 var point = new BMap.Point(116.404, 39.915);    // 创建点坐标 
map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。  
</script>

下面我们来逐步分析代码程序
1. 我们引用地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api？key=afsjfklasjflerwer54534354354&v=1.3&services=false"></script>
2. 创建地图容器元素
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
地图需要一个HTML元素作为容器，这样才能展现到页面上，这里我们创建了一个div元素，注意：一定要给这个元素给个id属性值 3. 命名空间
API使用BMap作为命名空间，所有类均在改命名空间下，比如：BMap.Map，BMap.Control.
4. 创建地图实例
var map = new BMap.Map("container");
位于BMap 命名空间下的Map 类表示地图，通过new 操作符可以创建一个地图实例。

其参数可以是元素id 也可以是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。
5. 创建点坐标
var point = new BMap.Point(116.404, 39.915);
这里我们使用BMap 命名空间下的Point 类来创建一个坐标点。Point 类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。
6. 地图初始化
map.centerAndZoom(point,15);
在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。

地图必须经过初始化才可以执行其他操作。

3．地图的操作
地图被实例化并完成初始化以后，就可以与其进行交互了。API 中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。

它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。
您还可以通过编程的方式与地图交互。Map 类提供了若干修改地图状态的方法
1. 下面这个实例显示一个地图，在等待两秒后会重新回到地图的中点。如果移动距离过大则地图直接跳到该点。

<script type="text/javascript">
 varmap = new BMap.Map("container"); 
 var point = new BMap.Point(116.404, 39.915); 
 map.centerAndZoom(point, 15); 
 window.setTimeout(function(){ 
 map.panTo(new BMap.Point(116.409, 39.918));  }, 2000);  
</script>

2 地图控件
我们经常可以看到地图中有一个小控件，这个控件可以改变地图显示程度。百度地图API中提供了丰富的控件，你可以自己动手做一个漂亮的控件
地图API中提供的控件有：
NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。 ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。 CopyrightControl：版权控件，默认位于地图左下方。

<script type="text/javascript">  
var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  
map.addControl(new BMap.NavigationControl());
</script>

添加控件我们可以用map.addControl()来实现。
3 . 覆盖物
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
地图API 提供了如下几种覆盖物：
Overlay：覆盖物的抽象基类，此类不可实例化，所有的覆盖物均继承此类的方法。 Marker：标注表示地图上的点，可自定义标注的图标。
Label：表示地图上的文本标注，您可以自定义标注的文本内容。 Polyline：表示地图上的折线。
Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。
InfoWindow：信息窗口也是一种特殊的覆盖物。注意：同一时刻只能有一个信息窗口在地图上打开。
可以使用BMap.Map.addOverlay() 方法向地图添加覆盖物，使用BMap.Map.removeOverlay()方法移除覆盖物，注意此方法不适用于InfoWindow。

<script type="text/javascript"> 
var map = new BMap.Map("container"); 
var point = new BMap.Point(116.404, 39.915);  
map.centerAndZoom(point, 15); 
 varmarker = new BMap.Marker(point); // 创建标注  map.addOverlay(marker); // 将标注添加到地图中  
</script>

标注表示地图上的点。

API 提供了默认图标样式，您也可以通过Icon 类来指定自定义图标。

BMap.Marker 的构造函数的参数为BMap.Point 和BMap.MarkerOptions（可选）。

注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon 的offset 属性修改标定位置。

1. 信息窗口
信息窗口在地图上方的浮动显示HTML 内容。

信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。

您可以使用 BMap.InfoWindow 来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态。

<script type="text/javascript">
 var map = new BMap.Map("container"); 
var point = new BMap.Point(116.404, 39.915); 
var marker = new BMap.Marker(point); 
var opts = { 
  width : 250,     // 信息窗口宽度   
  height: 100,     // 信息窗口高度  
  title : "Hello"  // 信息窗口标题 }  
map.centerAndZoom(point, 15); 
map.addOverlay(marker);  
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象  
marker.addEventListener("click", function(){              
this.openInfoWindow(infoWindow);   });

5右键菜单

<script type="text/javascript"> 
	var map = new BMap.Map("container");  
	var point = new BMap.Point(116.404, 39.915); 
	var menu = new BMap.ContextMenu(); 
	var txtMenuItem = [   { 
  		 			text:'放大', 
  	 				callback:function(){map.zoomIn()}   },   { 
   					text:'缩小', 
   					callback:function(){map.zoomOut()}   }  ];   
	 	for(var i=0; i < txtMenuItem.length; i++){   
			menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));  
		}   
 	map.centerAndZoom(point,15);  
	map.addContextMenu(menu);  
</script>

6工具条实例

<script type="text/javascript"> 
var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
 var myPushpin = new BMap.PushpinTool(map);   // 创建标注工具实例 
myPushpin.addEventListener("markend", function(e){ 
 	alert("您标注的位置：" + e.marker.getPosition().lng + ", " + e.marker.getPosition().lat); }); 
myPushpin.open();   
</script>

7服务实例周边搜索

<script type="text/javascript"> 
var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  
var local = new BMap.LocalSearch(map, {   renderOptions:{map: map, autoViewport:true} }); 
local.searchNearby("小吃", "前门");  
</script>

8驾车方案选择

<script type="text/javascript"> 
    var map = new BMap.Map("container"); 
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);     
    map.enableScrollWheelZoom(); 
    var start = "魏公村" ,end = "百度大厦",routePolicy = 
[BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];     
var arrInput = document.getElementById("dvPolicy").getElementsByTagName("input");     
search(start,end,routePolicy[0]); 
    document.getElementById("dvPolicy").onclick = function(e){          
	e = e || window.event; 
        var elem = e.srcElement || e.target , policyIndex;               
	 if(elem.tagName.toLowerCase() == "input"){ 
            policyIndex = elem.getAttribute("id").replace("policy","");                         
		 map.clearOverlays(); 
            search(start,end,routePolicy[policyIndex]);                      
	}     } 
    function search(start,end,route){  
        var transit = new BMap.DrivingRoute(map, {             
	renderOptions: {map: map,panel:"results"},              
	policy: route         }); 
        transit.search(start,end);     } 
</script>

IP定位

<script type="text/javascript"> 
var map = new BMap.Map("container");            // 创建Map实例 
var point = new BMap.Point(116.404, 39.915);    // 创建点坐标 map.centerAndZoom(point,15);  
function myFun(result){ 
    var cityName = result.name;     
map.setCenter(cityName);     
alert(cityName); } 
var myCity = new BMap.LocalCity(); 
myCity.get(myFun);
 </script>

summer7310

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
应用百度地图API

地图开发 1．首先我们看怎么获取API 通过地址http://api.map.baidu.com/api 加载API：其中参数key 为密钥，您可以在http://developer.baidu.com/map/apply-key.htm申请。参数v 为当前API 的版本号，目前最新版本为1.3，services 参数表示是否加载服务部分，true 表示加载，false 表示
复制链接

扫一扫

专栏目录