调用百度地图接口,在地图上添加标记并点击显示具体信息 | 您所在的位置:网站首页 › 百度地图没法标记地点 › 调用百度地图接口,在地图上添加标记并点击显示具体信息 |
对于在想实现地图功能时,百度地图和高德地图都提供了很好的API接口,直接进入官网查找相应的开发文档即可。 我这里使用的是百度地图,首先你得申请一个百度的密钥,这个很简单,网上很多教程。 货不多说,下面看代码 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} 添加信息窗口 // An highlighted block //百度地图API功能 function loadJScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "//api.map.baidu.com/api?v=2.0&ak=d5Y5C26Xbhr3rBHo3GzzaA7xcXev6NL0&callback=init"; document.body.appendChild(script); } window.init = function() { var map = new BMap.Map("allmap"); // 创建Map实例 //var point = new BMap.Point(109.18592,34.36912); // 创建点坐标 map.centerAndZoom(new BMap.Point(109.19708,34.36820), 15); // 设置中心点,地图初始化 //map.centerAndZoom(points,20); map.setCurrentCity("西安"); //设置当前城市 map.clearOverlays(); map.addControl(new BMap.MapTypeControl()); map.enableScrollWheelZoom(true); //启用滚轮放大缩小 map.addEventListener('click', function(e) { alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat); var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat); alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]); }); //向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //向地图中添加标记点 var myIcon =new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { //小车图片 offset: new BMap.Size(0, -5), //相当于CSS精灵 imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。 }); var points = [new BMap.Point(109.19474,34.36847),new BMap.Point(109.19435,34.37712),new BMap.Point(109.19261,34.37617),new BMap.Point(109.19701,34.37728),new BMap.Point(109.19702,34.37776),new BMap.Point(109.19784,34.37738),new BMap.Point(109.19784,34.376911),new BMap.Point(109.1987,34.37333),new BMap.Point(109.19705,34.36824),new BMap.Point(109.1836,34.37393)]; //10个坐标点 var marker1 =new BMap.Marker(points[1],{icon:myIcon}); // 创建10个标注 var marker2 =new BMap.Marker(points[2],{icon:myIcon}); var marker3 =new BMap.Marker(points[3],{icon:myIcon}); var marker4 =new BMap.Marker(points[4],{icon:myIcon}); var marker5 =new BMap.Marker(points[5],{icon:myIcon}); var marker6 =new BMap.Marker(points[6],{icon:myIcon}); var marker7 =new BMap.Marker(points[7],{icon:myIcon}); var marker8 =new BMap.Marker(points[8],{icon:myIcon}); var marker9 =new BMap.Marker(points[9],{icon:myIcon}); var marker0 =new BMap.Marker(points[0],{icon:myIcon}); map.addOverlay(marker1); // 将标注添加到地图中 map.addOverlay(marker2); map.addOverlay(marker3); map.addOverlay(marker4); map.addOverlay(marker5); map.addOverlay(marker6); map.addOverlay(marker7); map.addOverlay(marker8); map.addOverlay(marker9); map.addOverlay(marker0); map.setViewport(points); //调整地图的最佳视野为显示标注数组point var opts1 = {title : 'DTU01'}; var opts2 = {title : 'DTU02'}; var opts3 = {title : 'DTU03'}; var opts4 = {title : 'DTU04'}; var opts5 = {title : 'DTU05'}; var opts6 = {title : 'DTU06'}; var opts7 = {title : 'DTU07'}; var opts8 = {title : 'DTU08'}; var opts9 = {title : 'DTU09'}; var opts0 = {title : 'DTU10'}; var infoWindow1 =new BMap.InfoWindow("经度:09.19474纬度:34.36847口碑:![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 这里使用的是layui前段框架,和百度官方提供的代码有所区别,下面是官方提供的案列 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} 添加信息窗口 // 百度地图API功能 var map = new BMapGL.Map("allmap"); var point = new BMapGL.Point(116.404, 39.925); map.centerAndZoom(point, 15); var marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var opts = { width : 200, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "故宫博物院" , // 信息窗口标题 message:"这里是故宫" } var infoWindow = new BMapGL.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象 marker.addEventListener("click", function(){ map.openInfoWindow(infoWindow, point); //开启信息窗口 });在layui中需要对其先初始化,对地图一些功能的实现都写在 window.init = function() 里面。 function loadJScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "//api.map.baidu.com/api?v=2.0&ak=d5Y5C26Xbhr3rBHo3GzzaA7xcXev6NL0&callback=init"; document.body.appendChild(script); } window.init = function() { } loadScript()运行出来后是 |
CopyRight 2018-2019 实验室设备网 版权所有 |