web前端JavaScript嵌入百度地图API的方法 最详细 |
您所在的位置:网站首页 › 百度地图apikey申请 › web前端JavaScript嵌入百度地图API的方法 最详细 |
web前端JavaScript嵌入百度地图API最详细的方法
一、申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码。二、实现首图效果(可以参考开发者指南)1. 根据Hello World 手册操作2. 将代码块写入Demo中3. 开启鼠标滚轮缩放4. 添加标注 并且通过标注获取当前位置经纬度5. 启用信息窗口6. 自定义信息窗口
三、去除地图左下角logo标志级文字四、更多功能
先看效果图 ![]() ![]() ![]() ![]() ![]() ![]() ![]() 准备工作已经完成 在使用中只需要将(AK)码 (即密钥)写入代码中即可 (AK):7uXqh0qF1FNg7qgwriDofp2Ft3hxGcFb 二、实现首图效果(可以参考开发者指南) 1. 根据Hello World 手册操作将生成的ak的值复制进来 完成之后 打开页面 地图的鼠标滚轮缩放默认是关闭的,需要配置开启。 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 4. 添加标注 并且通过标注获取当前位置经纬度
定义标注图标 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), { // 指定定位位置。 // 当标注显示在地图上时,其所指向的地理位置距离图标左上 // 角各偏移10像素和25像素。您可以看到在本例中该位置即是 // 图标中央下端的尖角位置。 anchor: new BMap.Size(10, 25), // 设置图片偏移。 // 当您需要从一幅较大的图片中截取某部分作为标注图标时,您 // 需要指定大图的偏移位置,此做法与css sprites技术类似。 imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移 }); // 创建标注对象并添加到地图 var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); }点击标注获取当前经纬度 marker.addEventListener("click", function(){ alert("当前位置:" + e.point.lng + ", " + e.point.lat); });
注意:同一时刻地图上只能有一个信息窗口处于打开状态。 var opts = { width : 250, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "Hello" // 信息窗口标题 } var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口此时页面效果 ![]() 郑州信息大厦位于郑州市花园路143号。 郑州信息大楼由楷林公司投资承建。大楼总建筑面积101,235平方米,楼高80米,地上28层,地下2层。 " var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口页面效果已经完成 去除之前的 去掉文字,只需要在添加css即可 .BMap_cpyCtrl { display:none; }去掉地图logo,只需添加css .anchorBL{ display:none; } 四、更多功能查看百度地图开发者手册, |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |