記一次vue3.0項目引入高德地圖，湊合看，勿噴

• • 首先，找到高德地圖文檔，需要先申請一個key等，有三步，按文檔操作即可，最后拿到一個key和密鑰
  • 第二步，我使用了npm安裝Loader
  • 第三步，我在項目里public文件夾下的index.html中寫入
• 不喜勿噴，我也是第一次搞vue3 和高德地圖，寫的肯定不完美。覺得可以就點贊收藏喲
• • 完結，撒花🎉

項目中有個功能是打開地圖，搜索地點，獲取經緯度

如圖：
點擊查找位置按鈕，彈出地圖彈窗，搜索地點，展示結果列表，點擊某一條數據，關閉彈窗，返回經緯度

首先，找到高德地圖文檔，需要先申請一個key等，有三步，按文檔操作即可，最后拿到一個key和密鑰

高德地圖官方文檔

第二步，我使用了npm安裝Loader

官方鏈接

第三步，我在項目里public文件夾下的index.html中寫入

官方不推薦這種方式引入，因為我在開發階段，暫時先這樣寫<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: '', // 這里寫你第一步拿到的密鑰}</script>

然后在map.vue中編輯
貼出完整代碼吧

tip: 項目上線后發現地圖無法使用，最終找到原因是在index.html中獲取環境變量的方式不對，作出如下調整（同時記得要運維配置下nginx）

<script type="text/javascript">// 在html中這樣獲取環境變量const env = '<%= VUE_APP_ENV %>'window._AMapSecurityConfig = {serviceHost: env === 'production' ? `https://xxxxxxx/_AMapService`: `https://xxxxxxxxxx/_AMapService`,}; </script> <template><div class="mask" v-show="show" @click="clickMask"></div><div class="content" v-show="show"><div id="container"></div><div class="box"><div class="top_box"><div>選擇位置</div><van-icon name="cross" size="16" @click="clickMask" /></div><div class="info"><input id='tipinput' v-model="keyword" type="text" placeholder="搜索"></div></div><van-cell-group><van-cell><div class="my_city"><div class="my_city_label">我的位置</div><div>{{myCity}}</div></div></van-cell><van-cell v-for="item in areaList" :key="item" :title="item.name" :label="item.address" @click="clickCell(item)"></van-cell></van-cell-group></div> </template> <script> import {Cell, CellGroup, Icon} from 'vant' import AMapLoader from '@amap/amap-jsapi-loader' import { ref, shallowRef, onMounted, watch, watchEffect } from 'vue' export default {props: {show: {type: Boolean,defalut: false}},components: {[Icon.name]: Icon,[Cell.name]: Cell,[CellGroup.name]: CellGroup,},setup(props, { emit }){// console.log(props,'props')let keyword = ref('')// const map = shallowRef(null)let myCity = ref('')let areaList = ref([])onMounted(()=> {AMapLoader.load({key: '', //設置您的keyversion:"2.0",AMapUI:{version:"1.1",},Loca:{version:"2.0.0"},}).then((AMap) => {const map = new AMap.Map("container",{zoom:13,// center: [116.47394,39.904211],resizeEnable: true})AMap.plugin(['AMap.AutoComplete','AMap.PlaceSearch','AMap.Geolocation','AMap.CitySearch'],()=> {const geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位，默認：truetimeout: 10000, // 設置定位超時時間，默認：無窮大showButton: false, //顯示定位按鈕，默認：trueneedAddress: true //是否需要將定位結果進行逆地理編碼操作})map.addControl(geolocation)geolocation.getCurrentPosition()// 獲取用戶當前的精確位置信息geolocation.getCurrentPosition((status, result)=> {console.log(status, 'status-獲取用戶當前的精確位置信息')console.log(result,'result-獲取用戶當前的精確位置信息')// myCity.value = result.formattedAddressmyCity.value = result.addressComponent.province})})})})watch(keyword, (value) => {// console.log(value,'改變了')searcPlace(value)})const searcPlace = (val) => {AMapLoader.load({key: '', //設置您的keyversion:"2.0",AMapUI:{version:"1.1",},Loca:{version:"2.0.0"},}).then((AMap)=> {const map = new AMap.Map("container",{zoom:11,center: [116.47394,39.904211],resizeEnable: true})AMap.plugin(['AMap.AutoComplete','AMap.PlaceSearch'], ()=> {let placeSearch = new AMap.PlaceSearch({// city 指定搜索所在城市，支持傳入格式有：城市名、citycode和adcodecity: myCity.value,pageSize: 30})placeSearch.search(val, (status, result) => {// 查詢成功時，result即對應匹配的POI信息console.log(status,'-----placeSearch---查詢成功？')console.log(result,'---placeSearch---查詢結果')if(result.poiList && result.poiList.pois.length > 0){areaList.value = result.poiList.poislet pois = result.poiList.poisfor(let i = 0; i < pois.length; i++){let poi = pois[i]let marker = []marker[i] = new AMap.Marker({position: poi.location, // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]title: poi.name,})// 將創建的點標記添加到已有的地圖實例：map.add(marker[i])}// 自動適配到合適視野范圍// 無參數，默認包括所有覆蓋物的情況map.setFitView()}})})})}const clickCell = (data) => {// console.log(data,'ddd--')// console.log(keyword.value, 'keyword')keyword.value = data.namelet lat = data.location.lat // 緯度let lng = data.location.lng // 經度let zoom = 13let map = new AMap.Map('container',{resizeEnable: true})// 設置地圖中心點和縮放比例map.setZoomAndCenter(zoom,[lng, lat])const marker = new AMap.Marker({position: data.location, // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]title: data.name,})map.add(marker)emit('close-Amap', data.location)}// 點擊mask關閉彈窗const clickMask = () => {emit('close-Amap')}return {keyword,myCity,// map,areaList,clickCell,searcPlace,clickMask,}} } </script> <style lang="less" scoped> .mask {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0, .6); } .content {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 330px;height: 500px;background-color: #fff;.box {font-size: 14px;width: 100%;position: absolute;top: 0;left: 0;background-color: #ffffff;z-index: 99;.top_box {padding: 10px;display: flex;align-items: center;justify-content: space-between;}}.info {// width: 300px;width: 100%;height: 40px;background-color: #eeeeee;box-sizing: border-box;padding: 5px;#tipinput {width: 318px;height: 30px;box-sizing: border-box;border-radius: 4px;border: none;outline: none;background-color: #ffffff;padding-left: 10px;font-size: 12px;}} } .my_city {font-size: 12px; } /deep/.van-cell-group {height: 170px;overflow: auto; } .area_list {font-size: 12px;height: 300px;overflow: auto; } #container {width: 330px;height: 330px; } // 動效 .bounce-enter-active {animation: bounce-in 0.5s; } .bounce-leave-active {animation: bounce-in 0.5s reverse; } @keyframes bounce-in {0% {transform: translate(-50%, -50%) scale(0);}50% {transform: translate(-50%, -50%) scale(1.1);}100% {transform: translate(-50%, -50%) scale(1);} } </style>

不喜勿噴，我也是第一次搞vue3 和高德地圖，寫的肯定不完美。覺得可以就點贊收藏喲

完結，撒花🎉

總結

以上是生活随笔為你收集整理的vue3.0项目引入高德地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。