vue中引入高德地圖并多點標(biāo)注的實現(xiàn)步驟

更新時間：2022年09月07日 10:07:58 作者：啊翔呀

這篇文章主要介紹了vue中引入高德地圖并多點標(biāo)注,實現(xiàn)步驟是通過vue的方法引入地圖，初始化地圖，設(shè)置寬和高，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

vue中引入高德地圖并多點標(biāo)記

步驟:

通過vue的方法引入地圖
初始化地圖，設(shè)置寬和高
信息窗口實例
遍歷生成多個標(biāo)記點

首先在項目的public下的index.html中引入地圖

<link rel="stylesheet" />
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申請的key"></script>

上代碼（注釋）

<template>
  <div>
  //為地圖設(shè)置寬和高
    <div id="container" style="width: 100%;height: 700px"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    //假數(shù)據(jù)   經(jīng)緯度
      lnglats: [
        [113.922282,35.332887],
	    [113.963101,35.318516],
	    [113.960801,35.306263],
	    [113.926809,35.301255]
      ],
    }
  },
  mounted() {
    this.carGPSIP()
  },
  methods: {
    carGPSIP() {
      var map = new AMap.Map("container", {resizeEnable: true});//初始化地圖
      //信息窗口實例
      var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      //遍歷生成多個標(biāo)記點
      for (var i = 0, marker; i < this.lnglats.length; i++) {
        var marker = new AMap.Marker({
          position: this.lnglats[i],//不同標(biāo)記點的經(jīng)緯度
          map: map
        });
        marker.content = '我是第' + (i + 1) + '個Marker';
        marker.on('click', markerClick);
        marker.emit('click', {target: marker});//默認初始化不出現(xiàn)信息窗體,打開初始化就出現(xiàn)信息窗體
      }
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();
      }
    },
}
</script>
<style>
</style>

補充：下面看下VUE+vue-amap實現(xiàn)高德地圖多個標(biāo)記點展示

安裝組件

npm install vue-amap --save

在main.js引入插件

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '在高德地圖申請的key',
  plugin: [
    'AMap.DistrictSearch',
    'AMap.Autocomplete', // 輸入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角縮略圖插件 比例尺
    'AMap.OverView', // 地圖鷹眼插件
    'AMap.ToolBar', // 地圖工具條
    'AMap.MapType', // 類別切換控件，實現(xiàn)默認圖層與衛(wèi)星圖、實施交通圖層之間切換的控制
    'AMap.PolyEditor', // 編輯 折線多，邊形
    'AMap.CircleEditor', // 圓形編輯器插件
    'AMap.Geolocation', // 定位控件，用來獲取和展示用戶主機所在的經(jīng)緯度位置
    'AMap.Geocoder'
  ],
  v: '1.4.4',
  uiVersion: '1.0.11'
 
})

在index.vue中運用

html部分代碼

<template>
  <div>
     <el-amap
          vid="amapContainer"
          :amap-manager="amapManager"
          :events="events"
          class="amap-demo"
       >
      </el-amap>
   </div>
</template>

js部分代碼

 
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager()
export default {
  data() {
    return { 
       //地圖列表
      mapList: [],
      amapManager,
    }
 },
 
  //必須寫在mounted方法中
 mounted() {
    lazyAMapApiLoaderInstance.load().then(() => {
      
      this.map = new AMap.Map('amapContainer', {
        center: [108.956673, 34.211891], //地圖顯示的中心位置
        zoom: 5, //地圖縮放比例
        mapStyle: 'amap://styles/9477331003fd4f8bd683a2450bd58adb', //自定義地圖皮膚，用的規(guī)劃夜皮膚
      })
     //地圖標(biāo)記點方法
      this.markers()
    })
  },
 
 methods: {
   markers() {
   
      // 標(biāo)記點未渲染完 login加載中
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
        //地圖列表 從后臺獲取
      let mapList = this.mapList
    
     // 循環(huán)渲染標(biāo)記點
      for (var i = 0; i < mapList.length; i++) {
        
             // 獲取的經(jīng)緯度126.53,45.8
            let position = mapList[j].lng + ',' + mapList[j].lat
           //將字符串分割成數(shù)組形式 ["126.53", "45.8"]
            position = position.split(',')
      
            var text = new AMap.Text({
              text: '.',
              anchor: 'center', // 設(shè)置文本標(biāo)記錨點
              draggable: false,
              cursor: 'pointer',
              angle: 10,
              style: {
                'width': '20px',
                'height': '20px',
                'border-radius': '50%', //設(shè)置為圓形
                'background-color': mapList[i].colorStyle, //標(biāo)記點顏色
                'border-color': mapList[i].colorStyle, //標(biāo)記點邊框顏色
                'color':mapList[i].colorStyle, //文字顏色
                'opacity': '0.8', //透明度
              },
              position: position, //圓點位置 經(jīng)緯度
               //鼠標(biāo)放到圓點上顯示的信息
              title: `
                項目名稱：${mapList[i].proName}    
                 智能單元編號：${mapList[j].itNumber} `,
            })
            text.setMap(this.map)
            //關(guān)閉加載框
              setTimeout(() => {
              loading.close()
            }, 500)
        
      }
     
    },
//點擊左下角的設(shè)備列表聚焦到標(biāo)記點位置
  focusing(id) {
     // console.log(id) 獲取列表的經(jīng)緯度
      let mapList = this.mapList
      let arr = []
//循環(huán)地圖數(shù)據(jù)列表 經(jīng)緯度和左下角設(shè)備列表的經(jīng)緯度相同 就賦值到arr
      for (var i = 0; i < mapList.length; i++) {
        
        if (mapList[i].projectId == id) {
          arr.push(mapList[i].lng + ',' + mapList[i].lat)
        }
      }
       // 聚焦到標(biāo)記點位置的方法
      this.map.setZoomAndCenter(10, arr[0].split(','))
    },
}
</script>

會出現(xiàn)的問題

使用高德地圖自定義皮膚展示不出來必須在public下的index.html添加以下代碼

<!DOCTYPE html>
<html lang="en">
  <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 %>bitbug_favicon.ico">
    <title>設(shè)備地圖</title>
   <script>
      window._AMapSecurityConfig = {
            securityJsCode:'高德地圖你申請的安全密鑰',
        }        
   </script>
  <body>
      <script src="https://webapi.amap.com/maps?v=1.4.15&key=高德地圖申請的key&plugin=AMap.Geocoder"></script>
      <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
 
  </body>
</html>

到此這篇關(guān)于vue中引入高德地圖并多點標(biāo)注的文章就介紹到這了,更多相關(guān)vue高德地圖多點標(biāo)注內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: