vue集成百度地图

最新推荐文章于 2024-09-10 19:01:04 发布

置顶

qq_1017381567

最新推荐文章于 2024-09-10 19:01:04 发布

阅读量622

点赞数

分类专栏：小招

本文链接：https://blog.csdn.net/qq_43040915/article/details/115473932

版权

这里写自定义目录标题

vue集成百度地图

vue集成百度地图

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

准备vue脚手架

html代码如下，记得替换YOUR_AK为你的ak密钥，可以在百度地图API种获取到
导入

npm install vue-baidu-map --save

准备YOUR_AK为你的ak密钥

http://lbsyun.baidu.com/
在这里插入图片描述
申请完后有我的应用

页面代码

<template>
  <div class="map" ref="map">
      <!-- 地图搜索框 -->
      <el-input v-model="keyWord" placeholder="请输入地址来直接查找相关位置"></el-input>
      <!-- 地图实例 -->
      <baidu-map
          class="bmView"
          :scroll-wheel-zoom="true"
          :center="location"
          :zoom="zoom"
          @click="getLocationPoint"
          @ready="handler"
          ak="YOUR_AK"
      >
          <bm-view style="width: 100%; height:800px; flex: 1"></bm-view>
          <bm-local-search :keyword="keyWord" :auto-viewport="true" style="display: none"></bm-local-search>
          <!--信息窗口，show控制显示隐藏-->
          <bm-marker :position="{lng: locationInfo.lng,lat: locationInfo.lat}" >
              <bm-info-window :show="infoWindowShow" @close="infoWindowClose" @open="infoWindowOpen" style="font-size: 14px">
                  <p>当前点位：{
   {
    locationInfo.site }}</p>
              </bm-info