vue 高德地圖 —— 點標記、信息彈窗、網(wǎng)頁導航、獲取經(jīng)緯度及當前城市信息

這篇具有很好參考價值的文章主要介紹了vue 高德地圖 —— 點標記、信息彈窗、網(wǎng)頁導航、獲取經(jīng)緯度及當前城市信息。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

新建 components/amap.vue 文件，封裝高德地圖組件：

<template>
    <div>
     <div id="amapcontainer" style="width: 800px; height: 520px"></div>
    </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: '' // '「申請的安全密鑰」',
}
export default {
  name: "purchannel",
  data () {
    return {
      zoom: 12,
      originX: '',// 當前瀏覽器定位的位置
      originY: '',
      map: null, //地圖實例
      infoWindow: '',
      makerList: [],
      provinceArr: [],
      cityArr: [],
      provinceCode: '',
      cityCode: '',
      storeList: [], //門店列表
    }
  },
  watch: { },
  created () { },
  mounted () { 
    // DOM初始化完成進行地圖初始化
    this.initAMap()
  },
  methods: {
    initAMap () {
      AMapLoader.load({
        key: "", // 申請好的Web端開發(fā)者Key，首次調用 load 時必填
        version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
          'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 獲取到作為地圖容器的DOM元素，創(chuàng)建地圖實例
        this.map = new AMap.Map("amapcontainer", { //設置地圖容器id
          resizeEnable: true,
          zoom: this.zoom, // 地圖顯示的縮放級別
          viewMode: "3D", // 使用3D視圖
          zoomEnable: true, // 地圖是否可縮放，默認值為true
          dragEnable: true, // 地圖是否可通過鼠標拖拽平移，默認為true
          doubleClickZoom: true, // 地圖是否可通過雙擊鼠標放大地圖，默認為true
          // center: [113.370824, 23.131265], // 中心點坐標  廣州
          // mapStyle: "amap://styles/darkblue", // 設置顏色底層
        });

        this.getLocation()
        this.setupMapTool()
        
        this.searchCityInfo()
        // 地圖點擊事件，點擊獲取經(jīng)緯度;
        this.map.on("click", (e) => {
          // 獲取經(jīng)緯度
          // console.log('map click', e, e.lnglat.getLng(), e.lnglat.getLat());
          this.infoWindow.close()
        })
      }).catch(e => {
        console.log(e);
      })
    },
    setupMapTool () {
      // 添加工具條控件，工具條控件集成了縮放、平移、定位等功能按鈕在內的組合控件
      let controlBar = new AMap.ControlBar({
        position: {
          top: '10px',
          left: '10px',
        },
      });
      let toolBar = new AMap.ToolBar({
        position: {
          top: '110px',
          left: '35px'
        }
      });
      this.map.addControl(controlBar); // 方向盤
      this.map.addControl(toolBar);   // 添加右下角的放大縮小
      this.map.setDefaultCursor("pointer"); // 使用CSS默認樣式定義地圖上的鼠標樣式
    },
    searchCityInfo () {
      // 獲取當前城市，省份，經(jīng)緯度范圍
      const citySearch = new AMap.CitySearch()
      citySearch.getLocalCity((status, result) => {
        // console.log('citySearch', status, result);
        if (status === 'complete' && result.info === 'OK') {
          // 查詢成功，result即為當前所在城市信息
          this.getDivision(0, 1, result.province, result.city)
        } else {
          console.log('CitySearch出錯')
        }
      })
    },
    // 從高德地圖api獲取瀏覽器定位
    getLocation () {
      let geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默認：true
        enableHighAccuracy: true,
        // 設置定位超時時間，默認：無窮大
        timeout: 10000,
        //  定位成功后調整地圖視野范圍使定位位置及精度范圍視野內可見，默認：false
        zoomToAccuracy: true,
        panToLocation: true,     //定位成功后將定位到的位置作為地圖中心點，默認：true
        showButton: true,        //顯示定位按鈕，默認：true
        buttonPosition: 'LB',    //定位按鈕停靠位置，默認：'LB'，左下角
        buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
      })
      geolocation.getCurrentPosition((status, result) => {
        // console.log('getCurrentPosition', status, result)
        if (status == 'complete') {
          // result是具體的定位信息
          this.originX = result.position.lat
          this.originY = result.position.lng
        } else {
          console.log('定位出錯', result);
        }
      })
    },
    // 增加點標記
    setMapMarker () {
      // 創(chuàng)建 AMap.Icon 實例
      let icon = new AMap.Icon({
        size: new AMap.Size(36, 36), // 圖標尺寸
        image: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", // Icon的圖像
        imageSize: new AMap.Size(24, 30), // 根據(jù)所設置的大小拉伸或壓縮圖片
        imageOffset: new AMap.Pixel(0, 0)  // 圖像相對展示區(qū)域的偏移量，適于雪碧圖等
      });
      //信息窗口實例
      this.infoWindow = new AMap.InfoWindow({
        anchor: "top-left",
        offset: new AMap.Pixel(0, -30)
      });
      let makerList = []
      this.storeList.forEach((item) => {
        // 遍歷生成多個標記點
        let marker = new AMap.Marker({
          map: this.map,
          zIndex: 9999999,
          icon: icon, // 添加 Icon 實例
          offset: new AMap.Pixel(-13, -30), //icon中心點的偏移量
          position: [item.locationX, item.locationY] // 經(jīng)緯度對象new AMap.LngLat(x, y)，也可以是經(jīng)緯度構成的一維數(shù)組[116.39, 39.9]
        });
          let content =
            '<ul style="  margin:-10px 0 5px 0; padding:0.2em 0;">'
            + '<li style="line-height:26px; font-size:14px;color:#727272;margin-bottom:6px">'
            + item.name + '</li>'
            + '<li style="font-size:14px;color:#727272;">'
            + '<span style="width:50px; display:inline-block;" >地 址：</span>'
            + item.address + '</li>'
            + '<li  style="font-size:14px;color:#727272;">'
            + '<span style="width:50px; display:inline-block;">電 話：</span>'
            + item.phone + '</li>'
            + '</ul>'
          marker.content = content
          marker.on("click", this.markerClick)
          // marker.emit('click', { target: marker });// 此處是設置默認出現(xiàn)信息窗體
          makerList.push(marker)
      });
      this.makerList = makerList
      this.map.add(makerList)
      // 自動適應顯示想顯示的范圍區(qū)域
      this.map.setFitView();
    },
    // 控制標記的信息窗體的顯示
    markerClick (e) {
      // 標注的點擊事件
      this.infoWindow.setContent(e.target.content);
      this.infoWindow.open(this.map, e.target.getPosition());
    },
    // 開始定位
    beginLocate (x, y, index) {
      // console.log('x,y,this.makerList[index].content', this.makerList[index], x, y)
      this.map.panTo([x, y]) //設置地圖中心點
        if (this.makerList[index]) {
          this.infoWindow.setContent(this.makerList[index].content)
        }
        this.infoWindow.open(this.map, [x, y])
    },
    // 地圖導航
    beginNav (address, y, x) {
      let trimAdd = address.replace(/\s+/g, "");
      let src = `https://uri.amap.com/navigation?from=${this.originY},${this.originX},當前位置&to=${y},${x},${trimAdd}&policy=1&coordinate=gaode&callnative=0`
      window.open(src)
    },
    /**
     * @param code 編碼
     * @param layer 層級 默認1級（省份）
     * @param province 默認地址 省份
     * @param city 默認地址  城市
     * 查詢行政區(qū)域
     */
    getDivision (code = 0, layer = 1, province, city) {
      let data = {
        parentCode: code
      };
      this.$http({
        method: 'GET',
        url: this.baseURI + "dictionary/queryDivision.json",
        params: data
      }).then(res => {  //接口返回數(shù)據(jù)
        if (res.data.mobBaseRes.code == 100) {
          if (layer == 1) {
            this.provinceArr = res.data.mobBaseRes.result;
            if (province) {
              this.provinceArr.forEach((value, index, arr) => {
                if (arr[index].name == province) {
                  this.provinceCode = arr[index].code;
                  this.getDivision(this.provinceCode, 2, province, city)
                }
              })
            }
          } else {
            this.cityArr = res.data.mobBaseRes.result;
            if (city) {
              this.cityArr.forEach((value, index, arr) => {
                if (arr[index].name == city) {
                  this.cityCode = arr[index].code;
                  this.querychannel(this.cityCode)
                }
              })
            }
          }
        } 
      }).catch(err => {     
      })
    },
    /**
      * @param id 渠道id
      * 查詢指定行政區(qū)域的 marker 定位信息
      */
    querychannel (id) {
      let data = {
        'divisionCode': id
      };
      this.$http({
        method: 'GET',
        url: this.baseURI + "services/channel/info/list.json",
        params: data
      }).then(res => {  //接口返回數(shù)據(jù)
        if (res.data.mobBaseRes.code == 100) {
          this.storeList = res.data.mobBaseRes.datas || []      
          this.removeMarker()
          if (this.storeList.length) {
            this.setMapMarker()
          }
        } 
      }).catch(err => {
      })
    },
    // 清除點
    removeMarker () {
      if (this.makerList) {
        // 移除已創(chuàng)建的 marker
        this.map.clearMap() // 清除所有覆蓋物（點標志）
        this.makerList = []
      }
    }
  }
}

</script>

<style lang="less" scoped>
</style>

接下來，在需要使用的組件中引入 amap.vue：文章來源地址http://www.zghlxwxcb.cn/news/detail-414175.html

<template>
  <div>
    <map-container></map-container>
  </div>
</template>
<script>
import MapContainer from "@/components/amap";
export default {
  name: "purchannel",
  components: { MapContainer },
  data () {
    return { }
  },
  watch: {},
  created () { },
  mounted () { },
  methods: {
  }
}
</script>

<style lang="less" scoped>
</style>