百度地图的使用方法

1.首先注册

百度地图
进入控制台，注册账号

2.创建应用，生成自己的AK

Referer白名单：*
填一个*就可以

3.引用百度地图API文件

ak后面换成自己的AK

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">

4.存放地图

设置容器样式大小，使地图充满整个浏览器窗口：

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style> 

5.创建地图容器元素

<div id="container"></div> 

6.实例化地图

1.创建换一个地图实例
var map = new BMapGL.Map(“container”);
2.创建一个点
var point = new BMapGL.Point(113.6648, 34.7835);
3.设置缩放与中心点
map.centerAndZoom(point, 17);

上面6个步骤，可以生产一个地图
下面再分享一些地图所用的控件和绘制的方法

1.地图控件

①map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式；
②map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
③var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);

var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);

var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);

2.地图的绘制

1、点标记
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker)//视图添加点
2、多边线
var polyline = new BMapGL.Polyline(tempList,
{ Point: 1000,
strokeColor: “blue”,
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: ‘red’
});
3、多边形
var polygon = new BMapGL.Polygon(tempList,
{ strokeColor: “blue”,
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor:‘red’
});

4、圆形
var circle = new BMapGL.Circle(point,1000,
{strokeColor:“blue”,
strokeWeight:2,
strokeOpacity:0.5}); //创建圆
map.addOverlay(circle);
5、文本标记
内容
var content = “你好Hello”;
var label = new BMapGL.Label(content, { // 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
})
// 将标注添加到地图中
map.addOverlay(label);
// 设置label的样式
label.setStyle({
color: ‘#999’,
fontSize: ‘12px’,
border: ‘2px solid #1E90FF’
})
6、信息窗口
1、//窗口提示信息
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker);
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: “Hello”, // 信息窗口标题
}
2、//事件切换
//点击触发信息窗口
map.addEventListener(‘click’, function () {
map.openInfoWindow(infoWindow, point);
})
(4)事件
map.addEventListener(‘click’, function () {
})
dblclick
(5)地图检索
var local = new BMapGL.LocalSearch(map, {
renderOptions: { map: map }
});
执行检索
// local.search(“火锅”);