知識(shí)
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價(jià)值,我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí),更側(cè)重于功能的便捷,營(yíng)銷的便利,運(yùn)營(yíng)的高效,讓網(wǎng)站成為營(yíng)銷工具,讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持!
您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >
uniapp 微信小程序引用高德地圖
發(fā)表時(shí)間:2020-9-25
發(fā)布人:葵宇科技
瀏覽次數(shù):217
1.https://lbs.amap.com/api/wx/download
2.打開網(wǎng)址下載微信小程序sdk
3.解壓后得到 amap-wx.js 文件 放入的項(xiàng)目中
4.在需要使用高德地圖的vue文件中引入 amap-wx.js 文件
import amap from '@/common/js/amap-wx.js';
5.然后,在.vue中實(shí)例化 AMapWX 對(duì)象,調(diào)用 getPoiAround 方法,獲取POI數(shù)據(jù) 以下是完整代碼。
/** * map 用到的屬性 * @param width map寬度 * @param height map高度 * @param latitude 中心緯度 * @param longitude 中心經(jīng)度 * @param scale 縮放級(jí)別,取值范圍為5-18 * @param markers
標(biāo)記點(diǎn) * @param show-location 顯示帶有方向的當(dāng)前定位點(diǎn) * @param markertap 點(diǎn)擊標(biāo)記點(diǎn)時(shí)觸發(fā) :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 地球坐標(biāo) (WGS84) 火星坐標(biāo) (GCJ-02)也叫國(guó)測(cè)局坐標(biāo)系
success: function(res) {
that.latitude = res.latitude;
that.longitude = res.longitude;
that.getMap()
}
});
},
methods: {
getMap() {
var amapPlugin = new amap.AMapWX({
key: 申請(qǐng)的key
});
var that = this;
amapPlugin.getPoiAround({
success: function(data) {
//成功回調(diào)
that.markers = data.markers;
that.poisdatas = data.poisData;
var markers_new = [];
that.markers.forEach(function(item, index) {
markers_new.push({
id: item.id, //marker 序號(hào)
width: item.width, //marker 寬度
height: item.height, //marker 高度
//iconPath: item.iconPath, //marker 圖標(biāo)路徑
latitude: item.latitude, //marker 緯度
longitude: item.longitude, //marker 經(jīng)度 //自定義標(biāo)記點(diǎn)上方的氣泡窗口
callout: {
padding: 2, //callout 文本邊緣留白
fontSize: 15, //callout 文字大小
bgColor: 'blue', //callout 背景顏色
color: '#6B8E23', //callout 文字顏色
borderRadius: 5, //邊框圓角
display: 'BYCLICK', //callout 'BYCLICK':點(diǎn)擊顯示; 'ALWAYS':常顯
content: that.poisdatas[index].name //地理位置名稱
}
});
});
that.markers = markers_new;
console.log('data', JSON.stringify(that.poisdatas));
},
fail: function(info) {
//失敗回調(diào)
console.log('info', info);
}
});
},
//得到點(diǎn)擊的marker的id,遍歷markers數(shù)組,判斷有沒有相等的id
//如果有的就能從this.poisdatas[i].address得到坐標(biāo)位置(沒有就提醒下)
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>
相關(guān)案例查看更多
相關(guān)閱讀
- 大理小程序開發(fā)
- 云南網(wǎng)站建設(shè)高手
- 云南網(wǎng)站維護(hù)
- 云南網(wǎng)站建設(shè)招商
- 云南小程序開發(fā)制作
- 網(wǎng)站建設(shè)方案 doc
- 微信分銷系統(tǒng)
- 安家微信小程序
- 網(wǎng)站建設(shè)價(jià)格
- 網(wǎng)站建設(shè)服務(wù)公司
- 云南網(wǎng)站建設(shè)公司
- 前端開發(fā)
- 云南省住房建設(shè)廳網(wǎng)站
- 云南網(wǎng)站建設(shè)一條龍
- 云南etc微信小程序
- 開通微信小程序被騙
- 云南建設(shè)廳網(wǎng)站
- 云南省建設(shè)廳網(wǎng)站官網(wǎng)
- 云南網(wǎng)站建設(shè)
- 云南科技公司
- 網(wǎng)站開發(fā)公司哪家好
- 云南網(wǎng)站建設(shè)制作
- 云南小程序設(shè)計(jì)
- 網(wǎng)站搭建
- 網(wǎng)絡(luò)公司
- 高端網(wǎng)站建設(shè)公司
- 網(wǎng)站排名優(yōu)化
- 楚雄網(wǎng)站建設(shè)公司
- 迪慶小程序開發(fā)
- 汽車拆解管理系統(tǒng)