1.在index.html文件中引入百度地图API
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=h0vWcnPzA6e7d9YpDExOqoOt6vxBcvLS"></script>
2.获取当前定位,赋值给当前值
getLocalCity() {
var cityName = "";
var _this = this;
function myFun(result) {
cityName = result.name;
_this.localCity = cityName;
localStorage.setItem("localCity", cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
}
3.根据经纬度显示地图
var map = new BMap.Map("allmap"); //id,显示地图的id
var point = new BMap.Point(_this.jd,_this.wd); //当前经纬度
map.centerAndZoom(point,11);
// 设置定位marker
var marker = new BMap.Marker(new BMap.Point(_this.jd,_this.wd));
map.addOverlay(marker);
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(-20, -65) //设置文本偏移量
}
var label = new BMap.Label(_this.city, opts); // 创建文本标注对象
label.setStyle({
color : "#fff",
fontSize : "14px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑",
padding:"8px",
background:"green",
borderColor:"#F8f8f8",
});
map.addOverlay(label);