百度地图注册与使用

2022-01-12 18:06:50 阅读：308 来源： 互联网

标签：map point 地图 BMapGL 注册 var new 百度

百度地图注册与使用

一、先注册好百度地图账号（实名认证），注册好之后在“我的应用”里面创建属于自己的项目，应用类型选择浏览器端。
二、地图实例
1、在HTML文件里面引入src并添加ak

<script src="https://api.map.baidu.com/apiv=1.0&&type=webgl&ak=“你的秘钥”>
</script>

src里面的秘钥是在自己创建的项目ak中
2、地图存放
div存放地图<div id="container"></div>
3、实例化地图
创建一个地图实例

 var map = new BMapGL.Map("container");

创建一个点

var point = new BMapGL.Point(113.6648, 34.7835);

设置缩放与中心点

map.centerAndZoom(point, 17);

三、地图控件
1、地图控件

var scaleCtrl = new BMapGL.ScaleControl();

2、添加比例尺控件

 map.addControl(scaleCtrl);
 var zoomCtrl = new BMapGL.ZoomControl();

3、添加缩放控件

 map.addControl(zoomCtrl);
 var cityCtrl = new BMapGL.CityListControl();

4、添加城市列表控件

 map.addControl(cityCtrl);

5、开启鼠标滚轮缩放

 map.enableScrollWheelZoom(true);

6、开启地球模式

map.setMapType(BMAP_EARTH_MAP);

四、地图的绘制
1、点标记

 var marker = new BMapGL.Marker(point);
 map.addOverlay(marker);

2、多边线

 var polyline = new BMapGL.Polyline(tempList, { strokeColor: "blue",    strokeWeight: 2, strokeOpacity: 0.5 })
 map.addOverlay(polyline);

3、多边形

 var polygon = new BMapGL.Polygon(tempList,{ strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "#f00" })
 // 把多边形面绘制到画面中
 map.addOverlay(polygon);

4、圆形

var circle = new BMapGL.Circle(point, 1000, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
 //创建圆 
 map.addOverlay(circle);

5、文本标记
①、内容

var content = '中国<strong>前端</strong>学习基地';

②、设置

 var label = new BMapGL.Label(content, {       // 创建文本标注
     position: point,
     offset: new BMapGL.Size(10, 20)
        })
 map.addOverlay(label);

③、样式

 label.setStyle({  // 设置label的样式
    color: '#f30',
    fontSize: '12px',
    border: '2px solid #f70'
})

④、选项

var opts = {
   width: 200,     // 信息窗口宽度
   height: 100,     // 信息窗口高度
   title: "老曾教课的地方", // 信息窗口标题           
}

6、信息窗口

var infoWindow = new BMapGL.InfoWindow("地址：中国<br/><img src='http://statics.qikuedu.com/images/images0903/logo.png' width='100'>", opts); 
 // 创建信息窗口对象 
marker.addEventListener("click", function () {
 map.openInfoWindow(infoWindow, point); //开启信息窗口
 });

五、事件
1、地理位置检索

 var local = new BMapGL.LocalSearch(map, {
     renderOptions: { map: map }
 });

2、执行地图搜索功能

local.search("火锅");

标签：map,point,地图,BMapGL,注册,var,new,百度
来源： https://blog.csdn.net/w20180341314/article/details/122458101

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

百度地图注册与使用

百度地图注册与使用