vue使用百度地图API通过经纬度定位子公司的分布情况

1.引入百度地图秘钥：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>

2.完整代码：

<template>
  <div ref="map_chart" class="map_chart" />
</template>

<script>
import crudPublic from '@/api/public'
export default {
  name: 'MapChart',
  data() {
    return {
      json_data: []
    }
  },
  created() {
    this.$nextTick(() => {
      this.getMapData()
    })
  },
  mounted() {
    setTimeout(() => {
      // this.initMap()
    }, 200)
  },
  methods: {
    getMapData() {
      crudPublic.getCompany().then(res => {
        // console.log(res)
        this.json_data = res
        this.initMap()
      }).catch(err => {})
    },
    initMap() {
      const map = new BMap.Map(this.$refs.map_chart)
      const cityName = '重庆市'
      map.centerAndZoom(cityName, 10) // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom()
      const pointArray = new Array()

      for (let i = 0; i < this.json_data.length; i++) {
        const myIconoff = new BMap.Icon(require('../../assets/images/icon-company.png'), new BMap.Size(32, 32), { anchor: new BMap.Size(32, 32) })// 自定义图标
        const marker = new BMap.Marker(new BMap.Point(this.json_data[i].longitude, this.json_data[i].latitude), { icon: myIconoff }) // 创建点
        map.centerAndZoom(pointArray, 15)
        pointArray[i] = new BMap.Point(this.json_data[i].longitude, this.json_data[i].latitude)
        const label = new BMap.Label(this.json_data[i].companyName + '
手机号:' + this.json_data[i].tel, { offset: new BMap.Size(20, -10) })
        label.setStyle({
          color: '#2c2c2c',
          border: '1px solid #c2f4ff',
          maxWidth: 'none',
          lineHeight: '18px',
          padding: '2px 5px',
          marginTop: '40px',
          marginLeft: '-100px'
        })
        marker.setLabel(label)
        map.addOverlay(marker)
      }
      map.setViewport(pointArray)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    /deep/ .anchorBL {
        display: none;
    }
    /deep/ .BMap_cpyCtrl {
        display: none;
    }
    .map_chart{
        height: 600px;
    }
</style>

最终效果：