百度地图（前端入门学习）

参考文档

百度地图官网
百度地图教程

基础知识

lng：经度
lat：纬度

在百度地图中，习惯经度在前，纬度在后

地球上同一个地理位置的经纬度，在不同的坐标系中，会有少于偏移，国内目前常见的坐标系主要分为三种：

地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。
百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。

账号和获取密钥

百度地图-应用管理

vue项目使用（方案一：引用原生api）（全局注册）（不推荐）

对于直接在index.html页面全部引用的，本人强烈反对此种使用方式，因为我们项目是组件化的单页应用，强行引入多页应用的开发方式，会破坏整个项目的框架，严重影响性能。有些甚至还在vue单页应用中引入jquery，感觉这都是一些反人类的骚操作，不到万不得已，不建议使用。

参考文档-初始化地图

首先，申请百度地图ak

其次，引入百度地图js，在public/index.html里面添加下面代码

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">

然后，配置相关配置文件，由于cli3隐藏了webpack配置文件，所以我们需要在根目录创建一个vue.config.js文件，并写入下面代码

注意：如果使用type=webgl版本的地图，则下文的BMap要替换成BMapGL

module.exports={
  configureWebpack: {
    externals: {
      'BMap': 'BMap'
    }
  },
}

最后，组件引入（注意要设置容器的宽高）

<template>
  <div id="container"
       style="width:1000px;height:500px;margin:0 auto;"></div>
</template>
 
<script>
import BMap from 'BMap'
export default {
  name: 'Map',
  data () {
    return {}
  },
  methods: {
    createMap () {
      // 创建地图实例 
      // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标（百度经纬度坐标），默认为5。
      // 指定完成后API将以指定的坐标类型处理您传入的坐标
      var map = new BMap.Map("container", {
        coordsType: 5,
      });
      // 创建点坐标 
      var point = new BMap.Point(116.404, 39.915);
      // 初始化地图，设置中心点坐标和地图级别 
      map.centerAndZoom(point, 15);
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)
    }
  },
  mounted () {
    this.createMap()
  }
}
</script>

vue项目使用（方案二：引用原生api）（单页面按需加载）（推荐）

1、创建utils/BMap.js文件，写入初始化函数loadBMap，用于动态加载地图api。

/* eslint-disable */
export default function loadBMap(ak) {
  return new Promise(function(resolve, reject) {
    if (typeof BMap !== 'undefined') {
      resolve(BMap)
      console.log(BMap,BMAP_ANCHOR_TOP_RIGHT,BMAP_NAVIGATION_CONTROL_PAN)
      return true
    }
    window.onBMapCallback = function() {
      resolve(BMap)
    }
//     let script = document.createElement('script')
//     script.type = 'text/javascript'
//     script.src = 'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
//     script.onerror = reject
//     document.head.appendChild(script)
    let BMapURL = 'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
    let scriptNode = document.createElement('script')
    scriptNode.setAttribute('type', 'text/javascript')
    scriptNode.setAttribute('src', BMapURL)
    scriptNode.onerror = reject
    document.body.appendChild(scriptNode)
  })
}

2、页面使用

a、创建地图容器Div
b、引用import loadBMap from "@/utils/BMap.js"
c、在mounted使用loadBMap函数创建地图实例

<template>
  <div class="about">
    <h1>百度地图</h1>
    <div id="container"
         style="width:100%;height:500px"></div>
  </div>
</template>
<script>
import loadBMap from "@/utils/BMap.js"
export default {
  data () {
    return {
      map: {},
      centerPoint: {},
      navigationControl: {}
    }
  },
  mounted () {
    let that = this
    this.$nextTick(() => {
      loadBMap("ihfTt8V9XlSiHbuY9TpBdDaOhc7BuIe5")
        .then((BMap) => {
          // 创建地图实例
          var map = new BMap.Map("container");
          that.map = map
          // 创建点坐标  
          var centerPoint = new BMap.Point(116.404, 39.915);
          that.centerPoint = centerPoint
          // 初始化地图，设置中心点坐标和地图级别  
          that.map.centerAndZoom(centerPoint, 15);
          //开启鼠标滚轮缩放 
          that.map.enableScrollWheelZoom(true);

          // anchor 控件位置设置   offset 控件位置偏移    type 控件类型设置
          that.navigationControl = new BMap.NavigationControl({
            anchor: 1,  //右上角
            type: 2  //仅包含平移按钮
          })
          that.map.addControl(that.navigationControl);
        })
        .catch((err) => {
          console.log("地图加载失败", err);
        });
    })
  }
}
</script>

vue项目使用（方案三：vue-baidu-map组件）（官方开发的）

npm 地址
官方文档

使用案例