map組件基礎(chǔ)使用

<template><view class="contact"><image class="img" :src="formData.headImg"></image><view class="info"><view @click="callPhone">聯(lián)系電話：{{formData.phone}} ( 點(diǎn)擊撥打 )</view><view>地址：{{formData.addr}}</view></view><map class="map" v-if="showMap" :longitude="longitude" :scale="scale" :latitude="latitude" :markers="markers"></map></view>
</template><script>export default {data() {return {showMap: false,formData:{headImg:'http://www.itcast.cn/2018czydz/images/gywmban.jpg',phone: '(0571)28828888',addr:'浙江省杭州市濱江區(qū)江南大道3588號(hào)'},longitude: 120.172341,latitude: 30.19159,scale: 13, // 縮放級(jí)別，取值范圍為3-20， 默認(rèn)16markers:[ // 標(biāo)記點(diǎn)用于在地圖上顯示標(biāo)記的位置,支持多個(gè){longitude: 120.172341,latitude: 30.19159,iconPath: '../../static/logo.png',width: 20,height: 20,title:'ohh',// 點(diǎn)擊時(shí)顯示，callout存在時(shí)將被忽略label:{ content:'呀哈哈'},callout:{content:`kkkk\r\nphds`}}]}},mounted() {this.showMap = true;},methods: {phone() {uni.makePhoneCall({phoneNumber: this.formData.phone})}}}
</script><style lang="scss">
.contact{.img{width: 750rpx;height: 320rpx;}.info{padding: 10rpx 20rpx;font-size: 30rpx;view{line-height: 80rpx;border-bottom: 1px solid #eee;}}.map{width: 750rpx;height: 750rpx;}
}
</style>

封裝map.js，實(shí)現(xiàn)定位

1、使用第三方地圖：高德，申請(qǐng)對(duì)應(yīng)平臺(tái)key

注：高德地圖web js api：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

1、申請(qǐng)H5 key

1、登錄高德開(kāi)放平臺(tái)
（https://console.amap.com/dev），沒(méi)有賬號(hào)需要先注冊(cè)開(kāi)發(fā)者賬號(hào)

2、創(chuàng)建應(yīng)用：輸入名稱(chēng)，選擇應(yīng)用類(lèi)型

3、應(yīng)用右側(cè)，點(diǎn)擊添加key，添加h5 web端(JS API)，h5需申請(qǐng)這個(gè)key，否則活報(bào)key無(wú)效或不匹配

4、獲取key值后瀏覽器訪問(wèn)該鏈接，
記得替換key值： https://webapi.amap.com/maps?v=1.4.15&key=申請(qǐng)的key值，項(xiàng)目中創(chuàng)建map-h5.js, 將訪問(wèn)到的js復(fù)制并粘貼到map-h5.js，這里我存放的路徑是utils/maps-h5.js

5、如果不做map封裝，可以不執(zhí)行上一步，只需把申請(qǐng)到的web端的key和安全秘鑰配置到項(xiàng)目的manifest.json，即可使用高德地圖



此時(shí)使用api獲取當(dāng)前定位，使用Google瀏覽器訪問(wèn)時(shí)，并不會(huì)觸發(fā)獲取當(dāng)前位置api，而H5 端獲取定位信息，要求部署在 https 服務(wù)上，查看配置是已經(jīng)使用https協(xié)議
原因是：國(guó)內(nèi)使用Google瀏覽器訪問(wèn)極有可能被墻，所以可以使用其他瀏覽器進(jìn)行測(cè)試或者科學(xué)上網(wǎng)。
接口文檔：https://uniapp.dcloud.net.cn/api/location/location.html#getlocation

配置使用https協(xié)議

通過(guò)uni.getLocation獲取當(dāng)前定位信息時(shí)，成功回調(diào)函數(shù)中會(huì)返回當(dāng)前經(jīng)緯度等信息，如果想獲取當(dāng)前省市區(qū)信息，可以設(shè)置參數(shù) geocode 為 true，但該屬性?xún)HAPP端支持，H5則需要再通過(guò)第三方（高德）逆地理編碼解析出地址信息
逆地理編碼需要web服務(wù)的key作為參數(shù)，所以需要再申請(qǐng)web服務(wù)的key

// 轉(zhuǎn)地址
turnAdrr(longs, lat) {// 高德逆地理變碼 https://lbs.amap.com/api/webservice/guide/api/georegeo/let _key = '22865bd225e8ce6a8dc04780e9d650c1';//高德API key類(lèi)型：web服務(wù)uni.request({method: 'GET',url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',data: {key: _key,location: `${longs},${lat}`,output: 'JSON'},success: async (res) => {console.log(res)const resData = res.datathis.formData.addr = resData.regeocode.formatted_addressthis.latitude = latthis.longitude = longsthis.markers[0].latitude = latthis.markers[0].longitude = longsthis.showMap = true;},fail: r => {console.log(r);}});
},

以上通過(guò)逆地理編碼就可以得到當(dāng)前定位的地理信息

此時(shí)動(dòng)態(tài)獲取到當(dāng)前定位信息，就可以把數(shù)據(jù)動(dòng)態(tài)綁定到map組件中
到此H5使用第三方地圖已完成。

2、申請(qǐng)微信小程序 key

1、申請(qǐng)微信小程序key

2、下載小程序的js文件鏈接：https://lbs.amap.com/api/wx/download

3、下載完后將amap-wx.js文件解壓到項(xiàng)目即可（主要為了封裝map全局調(diào)用）

3、申請(qǐng)android key

1、申請(qǐng)Android證書(shū)
在uni-app官方文檔https://uniapp.dcloud.net.cn/左側(cè)菜單，點(diǎn)擊uniClound web端控制臺(tái)https://unicloud.dcloud.net.cn/，登錄開(kāi)發(fā)者賬號(hào)，然后點(diǎn)擊賬號(hào)管理，左側(cè)菜單：應(yīng)用管理-我的應(yīng)用，找到需要?jiǎng)?chuàng)建Android正式的項(xiàng)目

點(diǎn)擊項(xiàng)目名稱(chēng)-Android云端正式，點(diǎn)擊創(chuàng)建證書(shū)===》點(diǎn)擊確定，等待幾分鐘，正式就創(chuàng)建好了。

查看證書(shū)詳情，可以看到SHA1

查看/設(shè)置Android包名

2、獲得SHA1安全碼和包名之后，高德開(kāi)放平臺(tái)，添加Android key，并輸入SHA1 和包名，點(diǎn)擊確認(rèn)即可生成key。

3、復(fù)制Android key 添加到地圖配置中。如果不打算申請(qǐng)ios，隨便填一個(gè)或者都填A(yù)ndroid的key。

4、申請(qǐng)ios key

ios 申請(qǐng)相對(duì)有點(diǎn)麻煩，主要是需要登錄apple 開(kāi)發(fā)者平臺(tái)https://developer.apple.com/注冊(cè)開(kāi)發(fā)者賬號(hào)，然后申請(qǐng)ios正式,生成bundle id。
具體申請(qǐng)可以參考：http://news.558idc.com/288029.html
這里僅為了測(cè)試，就填了dcound提供的bundle id: io.dclound.HBuilder

點(diǎn)擊提交，生成ios平臺(tái)key，復(fù)制 key 添加到地圖配置中

2、封裝map

1、lib/map.js

以上各平臺(tái)key申請(qǐng)完成之后，新建lib/map.js進(jìn)行封裝

//h5 要調(diào)用的js文件
// #ifdef H5
import amap from '@/utils/map-h5.js';
// #endif
//微信小程序要調(diào)用的js文件
// #ifdef MP  
import amap from '@/utils/map-wx.js';
// #endif
//獲取位置信息
const getlocation = (opt) => {return new Promise((resolve, reject) => {//h5開(kāi)始// #ifdef H5AMap.plugin('AMap.Geolocation', function() {uni.showLoading({title: '系統(tǒng)正在定位'});var geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默認(rèn):truetimeout: 10000, //超過(guò)10秒后停止定位，默認(rèn)：5sbuttonPosition: 'RB', //定位按鈕的?？课恢?/span>buttonOffset: new AMap.Pixel(10, 20), //定位按鈕與設(shè)置的停靠位置的偏移量，默認(rèn)：Pixel(10, 20)zoomToAccuracy: true, //定位成功后是否自動(dòng)調(diào)整地圖視野到定位點(diǎn)});// console.log(geolocation,'geolocation')geolocation.getCurrentPosition(function(status, result) {console.log(status,'status')if (status == 'complete') {//這個(gè)地方的result，可能會(huì)出現(xiàn)報(bào)錯(cuò)：獲得地理定位時(shí)間。得到ipLocation成功。獲取地址失敗，請(qǐng)檢查您的密鑰或網(wǎng)絡(luò)。//可能是密匙申請(qǐng)錯(cuò)了，重新申請(qǐng)密匙，生成maps.js文件。// console.log(result)uni.hideLoading();resolve(result)} else {uni.hideLoading();uni.showToast({title: '定位失敗',});reject(result)}});});// #endif//h5結(jié)束//app開(kāi)始// #ifdef APP-PLUSuni.showLoading({title: '獲取信息中'});uni.getLocation({// map組件默認(rèn)為國(guó)測(cè)局坐標(biāo)gcj02，調(diào)用 uni.getLocation返回結(jié)果傳遞給組件時(shí)，需指定 type 為 gcj02 type: 'gcj02',geocode: true,success: function(data) {resolve(data)},fail: function(err) {reject(err)},complete() {uni.hideLoading();}})// #endif//app結(jié)束///小程序開(kāi)始// #ifdef MPvar amapPlugin = new amap.AMapWX({key: 'e7bdd77a10ffca3092c48032d1f74ace'  //此處為高德平臺(tái)申請(qǐng)的微信小程序的key});uni.showLoading({title: '獲取信息中'});amapPlugin.getRegeo({success: function(data) {resolve(data)},fail: function(err) {reject(err)},complete: function() {uni.hideLoading();}});// #endif//小程序結(jié)束})
};
export default {getlocation: getlocation
}

2、main.js中全局引用：

import map from 'common/map.js'
Vue.prototype.$map = map;

3、使用

<template><view class="contact"><image class="img" :src="formData.headImg"></image><view class="info"><view @click="callPhone">聯(lián)系電話：{{formData.phone}} ( 點(diǎn)擊撥打 )</view><view>地址：{{formData.addr}}</view></view><map class="map" v-if="showMap" :longitude="longitude" :scale="scale" :latitude="latitude" :markers="markers"></map></view>
</template>
<script>export default {data() {return {showMap:false,formData:{headImg:'http://www.itcast.cn/2018czydz/images/gywmban.jpg',phone: '(0571)28828888',addr:''},longitude: null,latitude: null,scale: 13, // 縮放級(jí)別，取值范圍為3-20， 默認(rèn)16markers:[ // 標(biāo)記點(diǎn)用于在地圖上顯示標(biāo)記的位置,支持多個(gè){longitude: null,latitude: null,iconPath: '../../static/logo.png',width: 20,height: 20,title:'ohh',// 點(diǎn)擊時(shí)顯示，callout存在時(shí)將被忽略label:{ content:'呀哈哈'},callout:{content:`kkkk\r\nphds`}}]}},created() {this.init();},methods: {init(){this.$map.getlocation().then(res => {console.log(res)// #ifdef APP-PLUSthis.formData.addr = res.address.province+res.address.city+res.address.district+res.address.street+res.address.streetNum+res.address.poiName;this.latitude = res.latitudethis.longitude = res.longitudethis.markers[0].latitude = res.latitudethis.markers[0].longitude = res.longitudethis.showMap = true;// #endif// #ifdef H5this.turnAdrr(res.longitude,res.latitude)// #endif}).catch(err => {console.log(err)})},// 轉(zhuǎn)地址turnAdrr(longs, lat) {// 高德逆地理變碼 https://lbs.amap.com/api/webservice/guide/api/georegeo/let _key = '22865bd225e8ce6a8dc04780e9d650c1';//高德API key類(lèi)型：web服務(wù)uni.request({method: 'GET',url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',data: {key: _key,location: `${longs},${lat}`,output: 'JSON'},success: async (res) => {console.log(res)const resData = res.datathis.formData.addr = resData.regeocode.formatted_addressthis.latitude = latthis.longitude = longsthis.markers[0].latitude = latthis.markers[0].longitude = longsthis.showMap = true;},fail: r => {console.log(r);}});},callPhone() {uni.makePhoneCall({phoneNumber: this.formData.phone})}}}
</script><style lang="scss">
.contact{.img{width: 750rpx;height: 320rpx;}.info{padding: 10rpx 20rpx;font-size: 30rpx;view{line-height: 80rpx;border-bottom: 1px solid #eee;}}.map{width: 750rpx;height: 750rpx;}
}
</style>

注意：H5需要開(kāi)啟使用https協(xié)議，調(diào)試時(shí)不要使用：Chrome、火狐、安卓原生WebView等，會(huì)報(bào)錯(cuò)：Get geolocation timeout.Get ipLocation failed.

報(bào)錯(cuò)是定位超時(shí)，由于JSAPI 使用的是瀏覽器提供的定位服務(wù)，所以定位的準(zhǔn)確度和成功率都會(huì)對(duì)瀏覽器有很大的依賴(lài)。由于Chrome在國(guó)內(nèi)沒(méi)有提供服務(wù)，因此使用Chrome定位服務(wù)的瀏覽器，比如：Chrome、火狐、安卓原生WebView等環(huán)境的原生定位通常都會(huì)定位失敗；
建議更換瀏覽器測(cè)試，推薦使用Edge 瀏覽器，或者翻墻。