久久精品女人热,国产成人欧美综合在线影院

Vue集成地圖API實(shí)現(xiàn)搜索與矢量圖區(qū)域顯示

前言

很久之前用過(guò)高德地圖的API，那時(shí)候vue組件還不是很多，所以用的是js來(lái)實(shí)現(xiàn)的。現(xiàn)在我們可以使用npm來(lái)安裝百度地圖來(lái)更方便的完成對(duì)應(yīng)的業(yè)務(wù)

一、準(zhǔn)備

我們先來(lái)一波npm

npm install vue-baidu-map --save

二、搜搜功能

1.頁(yè)面代碼

html代碼如下，記得替換YOUR_AK為你的ak密鑰，可以在百度地圖API種獲取到

<template>
<div class="map" ref="map">
      
      <el-input v-model="keyWord" placeholder="請(qǐng)輸入地址來(lái)直接查找相關(guān)位置"></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>
          
          <bm-marker :position="{lng: locationInfo.lng,lat: locationInfo.lat}" >
              <bm-info-window :show="infoWindowShow" @close="infoWindowClose" @open="infoWindowOpen" style="font-size: 14px">
                  <p>當(dāng)前點(diǎn)位：{{ locationInfo.site }}</p>
              </bm-info-window>
          </bm-marker>
      </baidu-map>
</div>
</template>
vue代碼如下，我們需要引入組件，并綁定一些事件

<script>
// 這些就是我們要用的組件了，有搜索框，信息框等等
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmView from "vue-baidu-map/components/map/MapView.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker.vue";
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue";
import BmLabel from "vue-baidu-map/components/overlays/Label.vue";
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue';
export default {
name: 'search',
components: {
    BaiduMap,
    BmView,
    BmMarker,
    BmLocalSearch,
    BmLabel,
    BmInfoWindow,
},
data() {
    return {
      infoWindowShow: false,
      // 要搜索的關(guān)鍵詞
      keyWord: '',
      BMap: null,
      // 地圖顯示的中心坐標(biāo)
      location: {
        lng: 121.530554,
        lat: 31.085783
      },
      // 點(diǎn)擊后的當(dāng)前坐標(biāo)點(diǎn)位的信息
      locationInfo:{
        lng: '',
        lat: '',
        siteName:'',
      },
      // 縮放，15基本上就可以看附近的一些街道了
      zoom: 15,
    }
},
methods: {
    handler(BMap) {
      // this.BMap = BMap;
      // this.BMap.map.setMapStyle({ styleJson: require("./map_black").default });
    },
    getLocationPoint(e) {
      // 點(diǎn)擊地圖后顯示信息窗體
      this.infoWindowShow = true
      this.locationInfo.lng = e.point.lng;
      this.locationInfo.lat = e.point.lat;
      // 創(chuàng)建地址解析器的實(shí)例
      let geocoder= new BMap.Geocoder();
      geocoder.getLocation(e.point,rs=>{
        // 詳細(xì)地址信息如下
        this.locationInfo.siteName = rs.address;
        console.log(rs.address);
        console.log(rs.addressComponents);// 結(jié)構(gòu)化的地址描述
        console.log(rs.addressComponents.province); // 省
        console.log(rs.addressComponents.city); // 城市
        console.log(rs.addressComponents.district); // 區(qū)縣
        console.log(rs.addressComponents.street); // 街道
        console.log(rs.addressComponents.streetNumber); // 門牌號(hào)
      });
    },
    infoWindowClose () {
      // 關(guān)閉信息窗體
      this.infoWindowShow = false
    },
    infoWindowOpen () {
      // 延遲打開(kāi)
      let self = this
      setInterval(()=>{
        self.infoWindowShow = true
      },200)
    },
},
}
</script>

2.個(gè)性化地圖

在上面的methods方法中有一個(gè)方法可以獲取到地圖實(shí)例，我們可以在這個(gè)方法里修改地圖樣式

首先要在同級(jí)目錄下建立一個(gè)map_black.js文件，里面可以填上地圖json格式的樣式

然后在下面方法中直接setMapStyle設(shè)置格式

handler(BMap) {
// this.BMap = BMap;
// this.BMap.map.setMapStyle({ styleJson: require("./map_black").default });
},
map_black.js文件如下

export default [{
"featureType": "land",
"elementType": "geometry",
"stylers": {
    "color": "#242f3eff"
}
}, {
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
    "color": "#242f3eff"
}
},
...
...

很多很多，就不全部復(fù)制了，大家可以到開(kāi)發(fā)平臺(tái)中自己調(diào)整個(gè)性化地圖然后復(fù)制json格式數(shù)據(jù)

三，區(qū)域顯示

1.主要代碼

下面我只展示區(qū)域顯示，所以用到的組件很少，只是多了一個(gè)bm-polygon

<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:810px; flex: 1; "></bm-view>
      <bm-polygon
          :path="p.paths"
          v-for="(p,index) of polygonList"
          :key="index"
          :stroke-color="p.strokeColor"
          :fill-color="p.fillColor"
          :fill-opacity="0.5"
          :stroke-opacity="0.8"
          :stroke-weight="2"
      />
</baidu-map>

2.主要數(shù)據(jù)

記得引用下對(duì)應(yīng)的組件，下面只是data中的數(shù)據(jù)，里面帶了自定義的區(qū)域顏色

// 引入
import BmPolygon from 'vue-baidu-map/components/overlays/Polygon.vue';
...
components: {
...
    BmPolygon,
},

// 區(qū)域數(shù)據(jù)
polygonList: [
   {
     strokeColor: 'red',
     fillColor: 'pink',
     paths: [
       {lat: '37.796849',lng: '112.611435'},
       {lat: '37.792115',lng: '112.611004'},
       {lat: '37.792229',lng: '112.62164'},
       {lat: '37.79759',lng: '112.62164'}
     ]
   },
   {
     strokeColor: 'orange',
     fillColor: 'yellow',
     paths: [
       {lat: '37.796149',lng: '112.611135'},
       {lat: '37.791315',lng: '112.610004'},
       {lat: '37.792029',lng: '112.62064'},
       {lat: '37.78759',lng: '112.62164'}
     ]
   }
],

總結(jié)

大家自己改改樣式改改數(shù)據(jù)，看下效果

搜索，點(diǎn)擊顯示坐標(biāo)

自定義電子圍欄區(qū)域顯示

作者：小碼哥

歡迎關(guān)注微信公眾號(hào) ：碼出宇宙

掃描添加好友邀你進(jìn)技術(shù)交流群，加我時(shí)注明【姓名+公司(學(xué)校)+職位】

在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

前端高級(jí)