地圖在 app 中使用還是很廣泛的，常見(jiàn)的應(yīng)用常見(jiàn)有：

1、獲取自己的位置，規(guī)劃路線。

2、使用標(biāo)記點(diǎn)進(jìn)行標(biāo)記多個(gè)位置。

3、繪制多邊形，使用圍墻標(biāo)記位置等等。

此篇文章就以高德地圖為例，以上述三個(gè)常見(jiàn)需求為例，教大家如何在 uniapp 中添加地圖。

作為一個(gè)不管閑事的前端姑娘，我就忽略掉那些繁瑣的賬號(hào)申請(qǐng)，假設(shè)需要的信息問(wèn)項(xiàng)目經(jīng)理都要來(lái)了，如果你沒(méi)有現(xiàn)成的信息，還需要申請(qǐng)，請(qǐng)查看：

https://lbs.amap.com/api/javascript-api-v2/prerequisites

去高德地圖注冊(cè)賬號(hào)，根據(jù)官網(wǎng)指示獲取 key。然后就正式開(kāi)始前端 uniapp + 高德地圖之旅啦！

一、地圖配置

在使用地圖之前需要配置一下你的地圖賬號(hào)信息，找到項(xiàng)目中的 manifest.json 文件，打開(kāi) web 配置，如圖：

?

?

此處是針對(duì) h5 端，如果我們要打包 安卓和 IOS app 需要配置對(duì)應(yīng)的key信息，如圖：

?

?

如果這些信息沒(méi)有人給你提供，就需要自己去官網(wǎng)注冊(cè)賬號(hào)實(shí)名認(rèn)證獲取。

二、地圖使用

2.1、使用標(biāo)記點(diǎn)進(jìn)行標(biāo)記多個(gè)位置，具體效果圖如下：

?

?

<template>
 <view class="map-con">
  <map style="width: 100%; height: 300px;" 
   :latitude="latitude" 
   :longitude="longitude" 
   :markers="covers"
   :scale="12">
  </map>
 </view>
</template>

<script>
 export default {
  data() {
   return {
    longitude: '116.473115',
    latitude: '39.993207',
    covers: [{
     id: 1,
     longitude: "116.474595",
     latitude: "40.001321",
     iconPath: '/static/images/point.png',
    },
    {
     id: 1,
     longitude: "116.274595",
     latitude: "40.101321",
     iconPath: '/static/images/point.png',
    },
    {
     id: 1,
     longitude: "116.374595",
     latitude: "40.101321",
     iconPath: '/static/images/point.png',
    },
    {
     id: 1,
     longitude: "116.374595",
     latitude: "40.011321",
     width: 44,
     height: 50,
     iconPath:'/static/images/point.png',
    }
   ]
  }
 }
}
</script>

?

注意：

看著代碼很簡(jiǎn)單，運(yùn)行在 h5 之后一切正常，但是運(yùn)行在安卓模擬器的時(shí)候，發(fā)現(xiàn)自定義圖標(biāo)沒(méi)有起作用，顯示的是默認(rèn)標(biāo)記點(diǎn)。

?

?

iconpath 的路徑不是相對(duì)路徑，沒(méi)有 ../../ 這些，直接根據(jù)官網(wǎng)提示寫(xiě)圖片路徑，雖然模擬器不顯示但是真機(jī)是正常的。

2.2、繪制多邊形，使用圍墻標(biāo)記位置等等。

?

?

<template>
  <view class="map-con">
    <map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" :scale="11"
      :polygons="polygon" :markers="covers">
    </map>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        longitude: '116.304595',
        latitude: '40.053207',
        polygon: [{
          fillColor: '#f00',
          strokeColor: '#0f0',
          strokeWidth: 3,
          points: [{
              latitude: '40.001321',
              longitude: '116.304595'
            },
            {
              latitude: '40.101321',
              longitude: '116.274595'
            },
            {
              latitude: '40.011321',
              longitude: '116.374595'
            }
          ]
        }],
        covers: [{
          id: 1,
          width: 30,
          height: 33,
          longitude: "116.314595",
          latitude: "40.021321",
          iconPath: '/static/images/point.png',
        }, ]
      }
    }
  }
</script>

?

更多樣式配置我們?nèi)⒖脊倬W(wǎng)，官網(wǎng)使用文檔寫(xiě)的很細(xì)致，地址為：

uniapp 官網(wǎng)：https://uniapp.dcloud.net.cn/component/map.html#

三、易錯(cuò)點(diǎn)

1、地圖已經(jīng)顯示了，誤以為地圖未展示

?

?

左下角有高德地圖標(biāo)識(shí)，就說(shuō)明地圖已經(jīng)正常顯示了，此時(shí)可以使用鼠標(biāo)進(jìn)行縮放，或設(shè)置地圖的縮放比例或者修改下地圖中心點(diǎn)的經(jīng)緯度。

2、標(biāo)記點(diǎn)自定義圖標(biāo)不顯示

marker 中的 iconPath 設(shè)置標(biāo)記點(diǎn)的圖標(biāo)路徑，可以使用相對(duì)路徑、base64 等，但是在 h5 查看正常，app 打包之后就不能正常顯示了，務(wù)必參考官網(wǎng)。

3、uni.getLocation 無(wú)法觸發(fā)

在調(diào)試模式中，調(diào)用 uni.getLocation 無(wú)法觸發(fā)，其中的 success fail complete 都無(wú)法執(zhí)行，不調(diào)用的原因是必須在 https 環(huán)境下，所以先保證是在 https 環(huán)境下。

四、有可用插件嗎？

uniapp 插件：https://ext.dcloud.net.cn/search?q=map

搜索地圖插件的時(shí)候，插件挺多的，有免費(fèi)的也有付費(fèi)的，即使使用插件也是需要需要注冊(cè)第三方地圖賬號(hào)的。

我個(gè)人認(rèn)為 uniapp 已經(jīng)將第三方地圖封裝過(guò)了，使用挺便捷的，具體是否使用插件就根據(jù)項(xiàng)目實(shí)際情況定。

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-677049.html

到了這里，關(guān)于uniapp 地圖如何添加？你要的教程來(lái)嘍！的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！