uniapp 微信小程序引用高德地图
1.https://lbs.amap.com/api/wx/download2.打开网址下载微信小程序sdk3.解压后得到 amap-wx.js 文件 放入的项目中4.在需要使用高德地图的vue文件中引入 amap-wx.js 文件import amap from '@/common/amap-uni.js';5.然后,在.vue中实例化 AMapWX 对象,调用 getPoiAround 方法,
·
1.https://lbs.amap.com/api/wx/download
2.打开网址下载微信小程序sdk
3.解压后得到 amap-wx.js 文件 放入的项目中
4.在需要使用高德地图的vue文件中引入 amap-wx.js 文件
import amap from '@/common/js/amap-wx.js';
5.然后,在.vue中实例化 AMapWX 对象,调用 getPoiAround 方法,获取POI数据 以下是完整代码。
/** * map 用到的属性 * @param width map宽度 * @param height map高度 * @param latitude 中心纬度 * @param longitude 中心经度 * @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 地球坐标 (WGS84) 火星坐标 (GCJ-02)也叫国测局坐标系
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 图标路径
latitude: item.latitude, //marker 纬度
longitude: item.longitude, //marker 经度 //自定义标记点上方的气泡窗口
callout: {
padding: 2, //callout 文本边缘留白
fontSize: 15, //callout 文字大小
bgColor: 'blue', //callout 背景颜色
color: '#6B8E23', //callout 文字颜色
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
//如果有的就能从this.poisdatas[i].address得到坐标位置(没有就提醒下)
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>
更多推荐
已为社区贡献2条内容
所有评论(0)