mintUI使用百度地图API,获取当前定位和显示指定经纬度地图

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);

  

posted @ 2019-06-03 14:16  神经质少女爱代码  阅读(651)  评论(0编辑  收藏  举报