一.首先引入所申请的ak密钥
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&v=2.0&services=false"></script>
二.简单样式处理一下
body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;}
三.html代码布局
//下面的代码是用来显示地图的
<div id="map"></div>
四.js代码如下
//创建Map地图实例
var map = new BMap.Map("allmap");
//设置中心点坐标
var point = new BMap.Point(116.331398,39.897445);
//初始化地图
/**
*地图类型:
*普通地图:BMAP_NORMAL_MAP
*卫星地图:BMAP_HYBRID_MAP
*/
var map = new BMap.Map("map",{mapType:BMAP_NORMAL_MAP,minZoom:1,maxZoom:18}); //设置地图类型及最小最大级别
//设置地图级别(1-18)
map.centerAndZoom(point,12);
//开启滚轮缩放地图
map.enableScrollWheelZoom();
//进行浏览器定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
// 定位成功事件
if(this.getStatus() == BMAP_STATUS_SUCCESS){
//alert('您的位置:'+r.point.lng+','+r.point.lat);
var point = new BMap.Point(r.point.lng, +r.point.lat);
}
},{enableHighAccuracy: true})
//addEventListener--添加事件监听函数
//click--点击事件获取经纬度
map.addEventListener("click",function(e){
prompt("鼠标单击地方的经纬度为:",e.point.lng + "," + e.point.lat);
});
————————————————
版权声明:本文为CSDN博主「叶少翔」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/jiangzunshao/article/details/53040856