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

一、安装及引入

1、在vue中安装依赖

$ npm install vue-baidu-map --save

在vue脚手架main.js中引入

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

2、cdn

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

3、申请ak及具体过程请参照官网

　　（1）官网：http://lbsyun.baidu.com/index.php?title=jspopularGL

　　（2）vue开发文档：https://dafrok.github.io/vue-baidu-map/#/

二、个别案例介绍

1、在地图上不同地点标出不同颜色的点

<!--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
      }
}

2、根据经纬度返回该点的信息及城市码citycode（逆地理编码服务）

$.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);
    }
});

接口功能介绍

逆地理编码

http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的ak&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194 //GET请求

注意：当前为V3.0版本接口文档，V2.0及以前版本自2019.6.18起新用户无法使用。老用户仍可继续使用V2.0及以前版本请求实现逆地理编码服务，为保障用户体验，建议您尽快迁移到V3.0版本。
如在使用V3.0 时“鉴权失败“ 可在”控制台“->“查看应用”->“设置” 确认是否已获得“逆地理编码服务”权限。
如有其他问题，可通过“反馈与帮助”反馈给我们。