zoukankan      html  css  js  c++  java
  • 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);
    

      

  • 相关阅读:
    Java经典逻辑编程50题 (转)
    Programmingbydoing
    前端测试框架jest 简介
    puppeteer入门
    面向对象编程
    Java常识
    JS 变量
    jmeter 压力测试
    jmeter 安装
    Java 数据驱动测试
  • 原文地址:https://www.cnblogs.com/blog-zy/p/10967326.html
Copyright © 2011-2022 走看看