如何在Vue.js、uniapp 使用百度地图javascript-api

83 阅读 0 评论 55 点赞

我是靠谱客的博主时尚书本，最近开发中收集的这篇文章主要介绍如何在Vue.js、uniapp 使用百度地图javascript-api，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

首先安装加载百度地图的插件

npm install bmap-jsapi-loader --save

找到需要加载地图的组件，然后导入安装的插件, 按照下面这段代码粘贴即可。

// App.vue
<template>
    <div id="map></div>
</template>

<script setup>
import { loader } from "bmap-loader";

loader({
  v: "1.0",
  type: "webgl",
  ak: "填写你的ak密钥",
}).then(() => {
      const map = new BMapGL.Map("map");
      map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
      map.addControl(
           new BMapGL.MapTypeControl({
               mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
          })
       );
       map.enableScrollWheelZoom(true);
 });
</script>

uni-app 中需要将脚本设置成 renderjs，就可以啦。

<script lang="renderjs">
import { loader } from "bmap-jsapi-loader";

loader({
  v: "1.0",
  type: "webgl",
  ak: "填写你的ak密钥",
}).then(() => {
      const map = new BMapGL.Map("map");
      map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
      map.addControl(
           new BMapGL.MapTypeControl({
               mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
          })
       );
       map.enableScrollWheelZoom(true);
 });
</script>