<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<!-- 1.填写密钥(ak) -->
<script type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
<title>地图展示</title>
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
</head>
<body>
<h1 class="text1"></h1>
<h2 class="text2"></h2>
<div id="allmap"></div>
</body>
</html>
<!-- 2.0 -->
<script type="text/javascript">
// 1) hello world
// GL版命名空间为BMapGL
// 按住鼠标右键,修改倾斜角和角度
// var map = new BMapGL.Map("allmap");
// // 创建Map实例
// // 广州: 113.2759952545166, 23.117055306224895
// // 北京: 116.404, 39.915
// var bp = new BMapGL.Point(113.2759952545166, 23.117055306224895);
// // 初始化地图,设置中心点坐标和地图级别
// map.centerAndZoom(bp, 11);
// //开启鼠标滚轮缩放
// map.enableScrollWheelZoom(true);
// 2) 定位 (有精准度和成功率)
// var map = new BMapGL.Map("allmap");
// var point = new BMapGL.Point(116.331398, 39.897445);
// map.centerAndZoom(point, 12);
// var geolocation = new BMapGL.Geolocation();
// geolocation.getCurrentPosition(function (r) {
// if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// var mk = new BMapGL.Marker(r.point);
// map.addOverlay(mk);
// map.panTo(r.point);
// // 获取经纬度
// console.log('您的位置:' + r.point.lng + ',' + r.point.lat);
// document.querySelector(".text1").innerText = '您的位置:' + r.point.lng + ',' + r.point.lat;
// document.querySelector(".text2").innerText = '您的位置:经度:' + r.point.lng + ',纬度:' + r.point.lat;
// }
// else {
// alert('failed' + this.getStatus());
// }
// });
// 3) IP定位
var map = new BMapGL.Map("allmap");
var point = new BMapGL.Point(116.331398, 39.897445);
map.centerAndZoom(point, 12);
function myFun(result) {
var cityName = result.name;
map.setCenter(cityName);
console.log("当前定位城市:" + cityName);
console.log(result);
document.querySelector(".text1").innerText = '您的位置:' + result.center.lng + ',' + result.center.lat;
document.querySelector(".text2").innerText = '您的位置:经度:' + result.center.lng + ',纬度:' + result.center.lat;
}
var myCity = new BMapGL.LocalCity();
myCity.get(myFun);
// 4) SDK辅助定位
// var map = new BMapGL.Map("allmap");
// var point = new BMapGL.Point(116.331398, 39.897445);
// map.centerAndZoom(point, 12);
// var geolocation = new BMapGL.Geolocation();
// // 开启SDK辅助定位
// geolocation.enableSDKLocation();
// geolocation.getCurrentPosition(function (r) {
// if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// var mk = new BMap.Marker(r.point);
// map.addOverlay(mk);
// map.panTo(r.point);
// // alert('您的位置:' + r.point.lng + ',' + r.point.lat);
// document.querySelector(".text1").innerText = '您的位置:' + r.point.lng + ',' + r.point.lat;
// document.querySelector(".text2").innerText = '您的位置:经度:' + r.point.lng + ',纬度:' + r.point.lat;
// }
// else {
// alert('failed' + this.getStatus());
// }
// });
</script>
08-18