百度地图API实例开发 分享

第一章. API函数说明

1.1 百度地图API介绍 

1．百度地图API是百度提供的给开发人员使用的开放性API，它分为三大类：网页地图应用、手机地图应用、服务器端地图应用；它们分别的意思是：[网页地图应用]即js jqueryAPI和Flash API等客户端就可以使用的，[手机地图应用]即安卓、ios、定位等移动应用，[服务端地图应用]也就是我们今天要讲的，web应用程序的调用。当然百度地图还有其它的开放产品，这里就不多讲。

第二章. ASP.NET调用百度地图API

1.1 程序调用注意事项

1．百度地图API免费对外开放，但使用前需要先申请密匙(key)，通过在线方式调用。Place API和Place suggestion API每个key对应的访问限制为10万次/天。Place suggestion API 是一套以HTTP形式提供的匹配用户输入关键字辅助信息、提示接口，可返回json或xml格式的一组建议词条的数据,配合Place API使用。Place API用于返回查询某个区域的某类POI数据，且提供单个POI的详情查询服务。

2．在ASP.NET程序中调用就是非常方便的了，直接js引用即可，例：

<script type="text/javascript" src="http://api.map.baidu.com/api?key=密匙值&v=1.4&services=true">script>

此API对大部分浏览器都是兼容的，可以放心使用。

 

1.2 常用技术

var map = new BMap.Map("hotelMap");    //创建地图容器 hotelMap就是地图容器DIV的ID值

map.centerAndZoom(”北京”, 11);         //初始化地图，设置中心点和地图级别

map.addControl(new BMap.NavigationControl()); //给地图添加鱼骨控件

map.enableScrollWheelZoom(); //激活滚轮调整大小功能

鱼骨控件：

 

就是地图左上角的那个东东。

map.addOverlay(a);   //添加覆盖物 后面会详细说明a是什么意思

map.addControl(new BMap.Xxx()); //添加控件

var myIcon = new BMap.Icon();//在地图中添加标注

 

 

还有很多其它的函数，就不一一列举了，各种示例请参阅：

http://developer.baidu.com/map/jsdemo.htm#a1_1

 

1.3 开发实例

在地图上添加标注，最开始使用BMap.Icon()、BMap.Marker()的方式，直接给标注图片，但是这种方式没办法自定义点击弹层的内容，只能单一的给文字，后来是发现另外一种方式 添加自定义的覆盖物map.addOverlay(a)，这里的a定义为：var a= new BMap.Overlay();你可以在a里面给自定义的 DOM元素，这样就更加方便我们对弹出内容的编译了； 有了标注之后就需要在地图上找位置根据经纬度，很简单 先实例化一个var point = new BMap.Point(X,Y); 然后调用函数

 map.pointToOverlayPixel(point );就可以了.

 

直接讲代码，会更容易理解一点：

var map = new BMap.Map("DIV1");     //创建地图容器

map.enableScrollWheelZoom(); //激活滚轮调整大小功能

map.centerAndZoom(cityName, 11);   //初始化地图

map.addEventListener("dragend", function () {   //地图拖拽事件 (dragend是固定写死的)

var center=map.getCenter(); //获取地图当前的中心点

}

var infoWindow = new BMap.InfoWindow(mapShowdiv); //地图弹窗

map.openInfoWindow(infoWindow, point); //地图弹窗并固定位置，如图：

 

 

var marker = new BMap.Marker(point)//创建地图标注

marker.addEventListener("click", function (e) {//地图标注点击事件

                还有mouseover、mouseout、rightclick等事件

            });

 

var div = document.createElement("div"); //创建DOM元素

map.getPanes().labelPane.appendChild(div); //将div添加到覆盖物容器中

 

111111111