mintUI使用百度地圖API,獲取當前定位和顯示指定經緯度地圖

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);
相關文章
相關標籤/搜索