什么是百度地图API?
百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用。百度地图API包含了构建地图基本功能的各种接口,提供了诸如本地搜索、路线规划等数据服务。
测试js API代码(并附详细注释)
HTML头部记得引入百度地区API版本
http://api.map.baidu.com/api?v=1.3
<div id="results"></div>
//用于存放搜索结果
<div id="container"></div>
//用于显示地图主体内容(必选)<script type="text/javascript">// <![CDATA[
var map = new BMap.Map("container"); // 创建地图实例 (必选)
var point = new BMap.Point(117.242856, 31.822101); // 创建点坐标 (必选)
map.addControl(new BMap.NavigationControl());//开启控制 控件
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.CopyrightControl()); //左下角显示版权信息
map.addControl(new BMap.MapTypeControl());//显示地图类型 (卫星,地图三维)
map.enableScrollWheelZoom(); //开启鼠标滚轮
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 (地图缩放级别)(必选)
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.addEventListener("click", function(data){ //监听点击事件
alert('你点击的了坐标');
});
marker.enableDragging(); //开启拖拽
marker.addEventListener("dragend", function(e){ //监听拖拽放开后事件
alert("当前位置:" + e.point.lng + ", " + e.point.lat); //弹出回传 经纬度
});
var opts = {
width : 250, // 信息窗口宽度
height: 80, // 信息窗口高度
title : "目标地区" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("<img src='http://hfhouse.com/images/2012/logo.gif' />", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
/* 绘制线条
* 起始坐标画线
* 总共花了三条线
*/
//第一条
var polyline = new BMap.Polyline([
new BMap.Point(119.28898, 26.022776),
new BMap.Point(123.490391, 25.754419)
],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
);
map.addOverlay(polyline);
//第二条
var polyline = new BMap.Polyline([
new BMap.Point(121.884221, 29.634663),
new BMap.Point(123.490391, 25.754419)
],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
);
map.addOverlay(polyline);
//第三条
var polyline = new BMap.Polyline([
new BMap.Point(117.232076, 31.821718),
new BMap.Point(123.490391, 25.754419)
],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
);
map.addOverlay(polyline);
/*监听鼠标点击事件*/
map.addEventListener("click", function(e){
var center = map.getCenter();
//alert("地图中心点变更为:" + center.lng + ", " + center.lat); //点击时 当前地区的中心点坐标
//alert("地图缩放至:" + this.getZoom() + "级"); //点击时 弹出当前地图地图缩放级别
alert(e.point.lng + ", " + e.point.lat); //点击位置的坐标
//map.removeEventListener("click", showInfo); //移除监听事件
});
/*监听鼠标缩放*/
map.addEventListener("zoomend", function(){
//alert("地图缩放至:" + this.getZoom() + "级"); //鼠标滚动缩放时弹出当前缩放等级
});
/*本地搜索 方式1 采用已实例的地区进行搜索*/
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("火车站");
/*
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "results"}
});
local.search("华邦世贸");
*/
/*本地搜索 方式2 直接采用文字搜索
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(117.242856, 31.822101), 15);
var local = new BMap.LocalSearch("合肥市", {
renderOptions: {
map: map,
autoViewport: true,
selectFirstResult: false
},
pageCapacity: 8
});
local.search("火车站");
*/
//map.removeOverlay(marker); //释放掉某一标注,不用时释放掉,节省内存
// ]]></script>