美文网首页
vue引入百度地图api组件封装

vue引入百度地图api组件封装

作者: zZ_d205 | 来源:发表于2020-11-18 10:07 被阅读0次

    vue引入百度地图api组件封装(根据地址定位)

    Map.vue

    <template>
      <div class="Map" :style="{
        height: this.height+'px',
        width:this.width+ 'px'
        }">
        <div id="allmap"></div>
      </div>
    </template>
    
    <script>
      /* eslint-disable quotes,camelcase */
    
      import {MP} from "./js/map"
    //  import {MP} from "./js/BMap"
    //  import {Change} from './js/changeJingwei'
      export default {
        name: 'Map',
        data () {
          return {
            ak: 'oWk8ofl3pI7jt4P9nng4cw2zyOQhY3pi'
          }
        },
        mounted() {
          this.$nextTick(function () {
            MP("oWk8ofl3pI7jt4P9nng4cw2zyOQhY3pi").then( BMap => {
              var th = this
              var map = new BMap.Map("allmap");            // 创建Map实例
              var point = new BMap.Point(116.404, 39.915); // 创建点坐标
              map.centerAndZoom(point,15);
              map.enableScrollWheelZoom();
              var myValue
              myValue = this.province+  this.city+ '' +  '' + this.name;  //传入相应参数 省、市、区、街道、名称 (内容可以为空)
              setPlace();
              function setPlace(){
                map.clearOverlays();    //清除地图上所有覆盖物
                function myFun(){
                  th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                  map.centerAndZoom(th.userlocation, 16);
                  map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                  onSearchComplete: myFun
                });
                local.search(myValue);
              }
            })
          })
        },
        props: {
          province: {
            type: String
          },
          name: {
            type: String
          },
          city: {
              type:String
          },
          height: {
            type: Number
          },
          width: {
            type: Number
          }
        },
        methods: {
          sad(){
            let map = new BMap.Map("allmap");    // 创建Map实例
            map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 10);
            map.enableScrollWheelZoom(true);
            map.clearOverlays();
            console.log(data.result.location.lng);
            console.log(data.result.location.lat);
            let new_point = new BMap.Point(data.result.location.lng, data.result.location.lat);
            let marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
            map.setCurrentCity(this.province);          // 设置地图显示的城市 此项是必须设置的
          }
        }
      }
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      #allmap {
        height: 100%;
        width: 100%;
      }
    </style>
    

    map.js

    export function MP(ak) {
      return new Promise(function (resolve, reject) {
        window.init = function () {
          resolve(BMap)
        }
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
        script.onerror = reject;
        document.head.appendChild(script);
      })
    }
    

    相关文章

      网友评论

          本文标题:vue引入百度地图api组件封装

          本文链接:https://www.haomeiwen.com/subject/kdwqiktx.html