vue项目使用百度地图

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

    });

}

 

<template>

  <div>

    <input type="text" id="suggestId" name="address_detail" placeholder="如门牌号等" v-model="address_detail"

      class="input_style">

    <div id="map"></div>

    <div>

      经度:{{ userlocation.lng }}

      纬度:{{ userlocation.lat }}

    </div>

  </div>

</template>

<script>

import { MP } from './bmap'

export default {

  data() {

    return {

      address_detail: null, //详细地址

      userlocation: { lng: "", lat: "" },

    }

  },

  methods: {

    initMap() {

      //初始化地图

      let map = new BMap.Map("map", { enableMapClick: false });//最好是将map设置到vuex中保存起来

      // this.$store.dispatch('mapInit',map);//将map对象放到vuex

      //设置地图中心点和显示级别，坐标可以设置为每个城市点位

      map.centerAndZoom(new BMap.Point(114.26101136, 30.6195223), 13);

      // 设置地图背景色为白色

      map.getContainer().style.background = '#fff';

      //设置滚轮

      map.enableScrollWheelZoom();

      map.addControl(new BMap.ScaleControl({//地图比例尺控件

        anchor: BMAP_ANCHOR_BOTTOM_LEFT

      }));

      //-------显示卫星地图----

      map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP] }));

    },

  },

  mounted() {

    this.$nextTick(function () {

      /* 加载地图的ak密钥 */

      MP("WnRsQH38vo7AliTGD2ZwExyqTUYkw246").then(BMap => {

        var th = this

        var map = new BMap.Map("map"); // 创建Map实例

        var point = new BMap.Point(116.404, 39.915); // 创建点坐标

        // 初始化地图,设置中心点坐标和地图级别

        map.centerAndZoom(point, 15);

        //-------显示卫星地图----

        map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP] }));

        // 开启鼠标滚轮缩放

        map.enableScrollWheelZoom();

        //地图的点击事件click,鼠标移动事件mousemove

        map.addEventListener('mousemove', function (e) {

          th.userlocation.lng = e.point.lng

          th.userlocation.lat = e.point.lat

        });

        // 添加比例尺控件

        var scaleCtrl = new BMap.ScaleControl();

        map.addControl(scaleCtrl);

        // 创建城市选择控件

        var cityControl = new BMap.CityListControl({

          // 控件的停靠位置（可选，默认左上角）

          anchor: BMAP_ANCHOR_TOP_LEFT,

          // 控件基于停靠位置的偏移量（可选）

          offset: new BMap.Size(10, 5)

        });

        // 将控件添加到地图上

        map.addControl(cityControl);

        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象

          {

            "input": "suggestId"

            , "location": map

          })

        var myValue

        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件

          var _value = e.item.value;

          myValue = _value.province + _value.city + _value.district + _value.street + _value.business;

          console.log(myValue, '62**')

          this.address_detail = myValue

          setPlace();

        });

        function setPlace() {

          map.clearOverlays();    //清除地图上所有覆盖物

          function myFun() {

            th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果

            map.centerAndZoom(th.userlocation, 18);

            map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注

          }

          var local = new BMap.LocalSearch(map, { //智能搜索

            onSearchComplete: myFun

          });

          local.search(myValue);

        }

      })

    })

  }

}

</script>

<style  >

#map {

  width: 100%;

  height: 700px;

}

</style>