快捷導航

vue3.0引入百度地圖并標記點的實現(xiàn)代碼

更新時間：2022年08月15日 10:15:27 作者：HHUFU..

這篇文章主要介紹了vue3.0引入百度地圖并標記點,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

首先新建一個js，主要用來引入百度地圖的js，代碼如下：

export function baiduMap() {
    return new Promise(function(resolve, reject) {
        window.baiduMap = function() {
            resolve()
        }

        var script2 = document.createElement('script')
        script2.type = 'text/javascript'
        script2.src = `http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js`

        var link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = `http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css`

        document.head.appendChild(link)
        document.head.appendChild(script2)

        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `http://api.map.baidu.com/api?v=3.0&ak=你的ak&callback=baiduMap`
        script.onerror = reject
        document.head.appendChild(script)
    })
}

獲取生成密匙： ak密匙(百度地圖)

其次，創(chuàng)建baidu-map.vue,代碼如下：

<template>
  <el-dialog title="門店地圖分布" v-model="open" width="70%"  draggable>
    <div id="map" :style="{height:mapHeight}">
      <div id="allmap" ref="allmap" ></div>
    </div>
  </el-dialog>

</template>
<script setup name="BaiduMap">
import {baiduMap} from '@/api/post/baiduMap'
import {getLineShopMap} from '@/api/post/line'
import {nextTick} from "vue";

const mapHeight = ref('70vh')
const open = ref(false)
const allmap = ref(null)

function map(id) {
  open.value = true
  getLineShopMap(id).then(res => {
    var markerArr = []
    var data = res.data
    for (var i = 0; i < data.length; i++) {
      var point = data[i].lng + "," + data[i].lat;
      var shop = '{ title: "' + data[i].shopname + '",areaname: "' + data[i].name + '", point: "' + point + '", receiver: "' + data[i].receiver + '", mobile: "' + data[i].mobile + '" }';
      var shopobj = eval('(' + shop + ')');
      markerArr.push(shopobj);
    }
    nextTick(res => {
      baiduMap().then(thatMap => {
        // 創(chuàng)建地圖實例
        var map = new BMap.Map("map");
        var point = new BMap.Point(113.312213, 23.147267); //地圖中心點，廣州市
        map.centerAndZoom(point, 13); // 初始化地圖,設(shè)置中心點坐標和地圖級別。
        map.enableScrollWheelZoom(true); //啟用滾輪放大縮小
        //地圖、衛(wèi)星、混合模式切換
        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
        //向地圖中添加縮放控件
        var ctrlNav = new window.BMap.NavigationControl({
          anchor: BMAP_ANCHOR_TOP_LEFT,
          type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);
        //向地圖中添加縮略圖控件
        var ctrlOve = new window.BMap.OverviewMapControl({
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
          isOpen: 1
        });
        map.addControl(ctrlOve);
        //向地圖中添加比例尺控件
        var ctrlSca = new window.BMap.ScaleControl({
          anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);

        var point = new Array(); //存放標注點經(jīng)緯信息的數(shù)組
        var marker = new Array(); //存放標注點對象的數(shù)組
        var info = new Array(); //存放提示信息窗口對象的數(shù)組
        var searchInfoWindow = new Array();//存放檢索信息窗口對象的數(shù)組

        for (var i = 0; i < markerArr.length; i++) {
          var p0 = markerArr[i].point.split(",")[0]; //
          var p1 = markerArr[i].point.split(",")[1]; //按照原數(shù)組的point格式將地圖點坐標的經(jīng)緯度分別提出來
          point[i] = new window.BMap.Point(p0, p1); //循環(huán)生成新的地圖點
          marker[i] = new window.BMap.Marker(point[i]); //按照地圖點坐標生成標記
          map.addOverlay(marker[i]);
          marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
          //顯示marker的title，marker多的話可以注釋掉
          var label = new window.BMap.Label(markerArr[i].title, {offset: new window.BMap.Size(20, -10)});
          marker[i].setLabel(label);
          // 創(chuàng)建信息窗口對象  receiver: "'+data[i].receiver+'", mobile:
          info[i] = "<p style='font-size:14px;line-height:20px'>" + "</br>門店名稱：" + markerArr[i].title + "</br>所在區(qū)域：" + markerArr[i].areaname + "</br>接收人：" + markerArr[i].receiver + "</br> 門店電話：" + markerArr[i].mobile + "</br></p>";
          //創(chuàng)建百度樣式檢索信息窗口對象
          searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
            title: markerArr[i].title,      //標題
            width: 290,             //寬度
            // height : 40,              //高度
            panel: "panel",         //檢索結(jié)果面板
            enableAutoPan: true,     //自動平移
            searchTypes: [
              BMAPLIB_TAB_SEARCH,   //周邊檢索
              //    BMAPLIB_TAB_TO_HERE,  //到這里去
              //   BMAPLIB_TAB_FROM_HERE //從這里出發(fā)
            ]
          });

          //添加點擊事件
          marker[i].addEventListener("click",
              (function (k) {
                // js 閉包
                return function () {
                  //將被點擊marker置為中心
                  // map.centerAndZoom(point[k], 13);
                  // console.log(searchInfoWindow[k])
                  //在marker上打開檢索信息窗口
                  searchInfoWindow[k].open(marker[k]);
                }
              })(i)
          );
        }
      });
    })
  })
}

defineExpose({
  map
})

</script>
<style>
#allmap {
  height: 100%;
  overflow: hidden;
}
</style>

最后，在你需要用到的界面引用

引用界面的script的代碼

import BaiduMap from "./baidu-map";
const mapRef = ref(null);

/**
 * 查看地圖
 * @param selection
 */
function openMap() {
  mapRef.value.map(form.value.id)
}

最終效果