APP-4-百度地图定位 _百度地图

但使书种多，会有岁稔时。这篇文章主要讲述APP-4-百度地图定位相关的知识，希望能为你提供帮助。
APP-3-百度地图应用
需要根据上一步完成百度地图应用的测试，本文介绍Hbuilder通过MUI框架完成百度地图的定位。
1.代码部分

文章图片

< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> < script src="http://img.readke.com/220514/043939AB-2.jpg"> < /script> < script src="http://img.readke.com/220514/0439393D7-3.jpg ak=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGA"> < /script> < script src="http://img.readke.com/220514/0439391156-4.jpg"> < /script> < script src="https://www.songbingjia.com/js/mui.min.js"> < /script> < link href="https://www.songbingjia.com/css/mui.min.css"rel="stylesheet"/> < link href="https://www.songbingjia.com/css/iconfont.css" rel="stylesheet"/> < title> 地图应用-地图定位< /title> < style type="text/css"> body, html, #allmap { width: 100%; height: 95%; /*overflow: hidden; */ font-family: "微软雅黑"; } < /style> < /head> < body> < header class="mui-bar mui-bar-nav"> < a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"> < /a> < h1 class="mui-title mui-body-font"> 地图定位< /h1> < /header> < div id="allmap"> 地图加载中。。。 < /div> < div class="mui-content-padded"> < button type="button" class="mui-btn mui-btn-block mui-btn-primary" onclick="getGeocode()"> 获取定位信息 < /button> < /div> < /body> < script type="text/javascript"> var exchange = { enableHighAccuracy: true, coordsType: \'bd09ll\', timeout: 6000, maximumAge: 5000, provider: \'baidu\' }; /*// 扩展API加载完毕后调用onPlusReady回调函数 document.addEventListener( "plusready", onPlusReady, false ); // 扩展API加载完毕，现在可以正常调用扩展API function onPlusReady() { // 获取定位 }*/getlocation(); function getlocation(){ // 获取位置信息 //plus.nativeUI.showWaiting(); navigator.geolocation.getCurrentPosition(getinfo,exception,exchange); }function initMap(point){ // 手机内置地图 /*var map=new plus.maps.Map("allmap"); var point = new plus.maps.Point(116.331398,39.897445); */ // 百度地图 map = new BMap.Map("allmap"); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.centerAndZoom(point, 18); // 地图滚动大小 map.enableScrollWheelZoom(true); // 创建标注 var marker = new BMap.Marker(point); // 将标注添加到地图中 map.addOverlay(marker); // 跳动的动画 marker.setAnimation(BMAP_ANIMATION_BOUNCE); }function getinfo(p){ var curlat = p.coords.latitude; var curlon = p.coords.longitude; var curadd = p.addresses; //坐标 console.log(curlat + \',\' + curlon); var gpsPoint = new BMap.Point(curlon, curlat); //坐标转换 BMap.Convertor.translate(gpsPoint, 0, initMap); }function exception(e){ alert(e.Message); }function getGeocode(){ getlocation(); } < /script> < /html>

View Code2.启动夜神模拟器
　