您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
uniapp 微信小程序引用高德地圖
發表時間:2020-9-25
發布人:葵宇科技
浏覽次數:113
1.https://lbs.amap.com/api/wx/download
2.打開網址下(xià)載微信小程序sdk
3.解壓後得到 amap-wx.js 文(wén)件 放入的項目中(zhōng)
4.在需要使用高德地圖的vue文(wén)件中(zhōng)引入 amap-wx.js 文(wén)件
import amap from '@/common/js/amap-wx.js';
5.然後,在.vue中(zhōng)實例化 AMapWX 對象,調用 getPoiAround 方法,獲取POI數據 以下(xià)是完整代碼。
/** * map 用到的屬性 * @param width map寬度 * @param height map高度 * @param latitude 中(zhōng)心緯度 * @param longitude 中(zhōng)心經度 * @param scale 縮放級别,取值範圍為5-18 * @param markers
标記點 * @param show-location 顯示帶有方向的當前定位點 * @param markertap 點擊标記點時觸發 :markers="markers" * */
<template>
<view style="width: 100%; height: 100%;">
<view class="page-body">
<view class="page-section page-section-gap">
<map
style="width: 100%; height: 1000rpx;"
:latitude="latitude"
:longitude="longitude"
scale="16"
show-location="true"
@markertap="markertap"
></map>
</view>
</view>
</view>
</template>
<script>
import amap from '@/common/js/amap-wx.js';
export default {
data() {
return {
markers: [{}, {}, {}],
poisdatas: [{}, {}, {}],
title: 'map',
latitude: 11,
longitude: 113
};
},
onLoad() {
var that = this;
uni.getLocation({
type: 'gcj02',//wgs84 地球坐(zuò)标 (WGS84) 火星坐(zuò)标 (GCJ-02)也叫國測局坐(zuò)标系
success: function(res) {
that.latitude = res.latitude;
that.longitude = res.longitude;
that.getMap()
}
});
},
methods: {
getMap() {
var amapPlugin = new amap.AMapWX({
key: 申請的key
});
var that = this;
amapPlugin.getPoiAround({
success: function(data) {
//成功回調
that.markers = data.markers;
that.poisdatas = data.poisData;
var markers_new = [];
that.markers.forEach(function(item, index) {
markers_new.push({
id: item.id, //marker 序号
width: item.width, //marker 寬度
height: item.height, //marker 高度
//iconPath: item.iconPath, //marker 圖标路(lù)徑
latitude: item.latitude, //marker 緯度
longitude: item.longitude, //marker 經度 //自定義标記點上方的氣泡窗口
callout: {
padding: 2, //callout 文(wén)本邊緣留白
fontSize: 15, //callout 文(wén)字大小
bgColor: 'blue', //callout 背景顔色
color: '#6B8E23', //callout 文(wén)字顔色
borderRadius: 5, //邊框圓角
display: 'BYCLICK', //callout 'BYCLICK':點擊顯示; 'ALWAYS':常顯
content: that.poisdatas[index].name //地理位置名稱
}
});
});
that.markers = markers_new;
console.log('data', JSON.stringify(that.poisdatas));
},
fail: function(info) {
//失敗回調
console.log('info', info);
}
});
},
//得到點擊的marker的id,遍曆markers數組,判斷有沒有相等的id
//如(rú)果有的就能從this.poisdatas[i].address得到坐(zuò)标位置(沒有就提醒下(xià))
markertap: function(e) {
for (var i = 0; i < this.markers.length; i++) {
if (JSON.stringify(e).substring(18, 20) == this.markers[i].id) {
console.log('markers' + this.poisdatas[i].name + ' ' + this.poisdatas[i].address);
uni.showToast({
title: this.poisdatas[i].name,
mask: false,
duration: 1500
});
}
}
}
}
};
</script>
<style></style>