百度地图的使用

最新推荐文章于 2024-04-26 16:47:48 发布

小蜗蜗有头发

最新推荐文章于 2024-04-26 16:47:48 发布

阅读量401

点赞数

文章标签：百度前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_45304830/article/details/127609004

版权

按照公司业务需求，短暂的学习了一下百度地图。他有两种使用方式，一种是通过下载安装依赖包，另外一种是通过引入外部js。
javaScript API https://lbs.baidu.com/index.php?title=jspopularGL
Vue Baidu Map文档 https://dafrok.github.io/vue-baidu-map/#/zh/index
百度地图实例 https://lbsyun.baidu.com/index.php?title=open/jsdemo
注意：不管是第一种依赖包还是外部js都需要申请密钥

申请密钥

首先进入百度地图开放平台https://lbs.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5
百度地图开放平台 -> 控制台 -> 应用管理 -> 我的应用 -> 创建应用进行密钥申请
在这里插入图片描述

一，vue-baidu-map

1.安装

npm install vue-baidu-map  --save

2.项目引入

import BaiDuMap from "vue-baidu-map"
Vue.use(BaiDuMap, {
  ak:'你所申请的百度地图密钥'//你所申请的百度地图密钥
})

3.项目使用

代码

<template>
  <div>
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      @ready="handler"
    ></baidu-map>
  </div>
</template> 

<script >
export default {
  name: "BaiDuMap",
  data() {
    return {
      center: {
        lng: 0,
        lat: 0,
      },
      zoom: 13,
      BMap: null,
      map: null,
    };
  },
  created() {},
  methods: {
    handler({ BMap, map }) {
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
      this.BMap = BMap;
      this.map = map;
      this.map.enableScrollWheelZoom(true); //可以缩放
    },
  },
};
</script>

<style>
.map {
  width: 100%;
  height: 600px;
}
.anchorBL {
  display: none;
  /* 隐藏百度地图logo */
}
.select-content {
  display: flex;
  margin-bottom: 20px;
}
</style>

效果图

在这里插入图片描述
其他详细功能可以查看官网

二，外部js引入方式

vue在使用外部js引入的时候建议在项目的public->index.html用script引入

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <style>
  </style>
  <body>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=百度地图版本号（一般建议使用2.0的）&ak=你的百度地图密钥"></script>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

页面使用

<template>
   <div class="center-map" ref="mapChart" id="dituContent"></div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
     
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.createMap(); //创建地图
      this.setMapEvent(); //设置地图事件
      this.addMapControl(); //向地图添加控件
      // this.addMarker(); //向地图中添加marker
    },
    createMap() {
      var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
      var point = new BMap.Point(114.394572, 30.479824); //定义一个中心点坐标
      map.centerAndZoom(point, 18); //设定地图的中心点和坐标并将地图显示在地图容器中
      map.setMapStyle({
        features: ["road", "building", "water", "land"],
        style:"dark"
      });
      let that=this
      map.addEventListener("click", function (e) {
        //点击事件
      });
      window.map = map; //将map变量存储在全局
    },
    setMapEvent() {
      map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
      map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
      map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
      map.enableKeyboard(); //启用键盘上下左右键移动地图
      // map.addEventListener("click", function (e) {
      //   console.log(e);
      // });
    },
    addMapControl() {
      //向地图中添加缩放控件
      var ctrl_nav = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE,
      });
      map.addControl(ctrl_nav);
      //向地图中添加缩略图控件
      var ctrl_ove = new BMap.OverviewMapControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        isOpen: 1,
      });
      map.addControl(ctrl_ove);
      //向地图中添加比例尺控件
      var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
      map.addControl(ctrl_sca);
    },
    addMark() {
      var circle = new BMapGL.Circle(
        new BMapGL.Point(114.394572, 30.479824),
        300,
        {
          strokeColor: "blue",
          strokeWeight: 2,
          strokeOpacity: 0.5,
        }
      );
      map.addOverlay(circle);
    },
  },
};
</script>

效果图

在这里插入图片描述

注意：

有的人可能使用的是import 或者require的方式引入的在使用的时候要用window.拿取
如：

   var map = new window.BMap.Map("dituContent"); //在百度地图容器中创建一个地图
    var point = new window.BMap.Point(114.394572, 30.479824); //定义一个中心点坐标