1.在index.html文件中引入百度地圖APIjavascript
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=h0vWcnPzA6e7d9YpDExOqoOt6vxBcvLS"></script>
2.獲取當前定位,賦值給當前值html
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.根據經緯度顯示地圖java
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);