百度地图在前端开发中的运用

$ npm install vue-baidu-map --save

import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
    ak: 'Yo8oGhNGslHc4B8Qs8EWI4BvU3Qt4Zla'
});　

<script src="https://unpkg.com/vue-baidu-map"></script>

<!--center和zoom属性必须要有，否则地图不渲染。-->
<!--@ready：地图 API 加载完毕后执行的代码，不要在 vue 自身的生命周期中调用 BMap 类-->
<!--ak:百度地图密钥，没有会报错-->
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true">
<!--      这里使用<template>循环只是为了减少代码结构，使用<div>循环效果一样的，看个人习惯-->
        <template v-for="(item,index) in points">
          <bm-marker :key="index" :position="item.site" :dragging="false"   :icon="{url: item.url, size: { 30, height: 40}}" @click="infoWindowOpen(item)"></bm-marker>
        </template>
        <bm-info-window @close="infoWindowClose2" @open="infoWindowOpen2" :position="site" :show="show">
        {{content}}
        </bm-info-window>
</baidu-map>

handler ({BMap, map}) {
      console.log(BMap, map)
      // 地图中心点
      this.center.lng = 116.315064
      this.center.lat =  40.043554
      this.zoom = 15
      this.addPoints()
},
addPoints () {
      // 随便给的几个点
      this.points = [
          {
            site:{
              lng: '116.315064',
              lat: ' 40.043554'
            },
            value: '嘉华大厦',
            id: 3,
            url: ''
          },
          {
            site:{
              lng: '116.306754',
              lat: '40.047459'
            },
            value: '八维研修学院',
            id: 2,
            url: ''
          },
          {
            site:{
              lng: '116.32508',
              lat: '40.030197'
            },
            value: '北京体育大学',
            id: 1,
            url: ''
          },
          {
            site:{
              lng: '116.302227',
              lat: '40.033954'
            },
            value: '兴天海园',
            id: 4,
            url: ''
          }
      ]
      // 根据id区别图标，相对路径要使用require()
      for(let item of this.points){
        let path = ''
        switch (item.id) {
            case 1:
                path = require('../../assets/redIcon.gif')
                break;
            case 2:
                path = require('../../assets/yellowIcon.png')
                break;
            case 3:
                path = require('../../assets/blueIcon.png')
                break;
            case 4:
                path = require('../../assets/blackIcon.png')
                break;
        }
        item.url = path
      }
}

$.ajax({
    url:'http://api.map.baidu.com/reverse_geocoding/v3/?ak=你的ak&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194',
    dataType: 'jsonp',
    callback: 'BMap._rd._cbk43398',
    success: function(res) {
          console.log(res);
    },
    error:function(res) {
          console.log(res);
    }
});