uniapp 默认是使用腾讯地图,想要使用第三方高德地图。
1、首先要注册高德地图,然后下载微信小程序SDK 微信小程序sdk也支持app端使用。
2、去高德控制台 管理中心 》 应用管理 》新建应用
3、下面就是引用高德地图
将下载好的微信小程序sdk文件放下项目根目录js_sdk 文件中
下面使用页面中引入文件
import amap from “…/…/js_sdk/js-amap/amap-wx.js”;
<template>
<view class="map">
<map id="map_container" :latitude="latitude" :longitude="longitude" scale="11" :markers="markers"
:show-location="true" @markertap="markertap" @updated='mapUpdated' @tap='closeMapMarker'></map>
</view>
</template>
<script>
// import moment from "moment"; // 格式化时间 插件
import amap from "../../common/amap-wx.js";
export default {
data() {
return {
key: "该key 是在高德中申请的微信小程序key",
amapPlugin: null,
latitude: 23.130061,
longitude: 113.264499,
markers: [],
mapInfo: [],
}
},
onLoad() {
this.amapPlugin = new amap.AMapWX({
key: this.key //该key 是在高德中申请的微信小程序key
});
this.amapPlugin.getRegeo({
type: 'gcj02', //map 组件使用的经纬度是国测局坐标, type 为 gcj02
success: function(res) {
console.log(res)
const latitude = res[0].latitude;
const longitude = res[0].longitude;
that.longitude = longitude;
that.latitude = latitude;
that.mapInfo = res[0];
},
fail: (res) => {
console.log(JSON.stringify(res));
}
});
},
methods: {
markertap() {},
mapUpdated() {},
closeMapMarker() {},
}
}
</script>
<style lang="scss">
.map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#map_container{
width: 100%;
height: 100%;
}
</style>
总结:
01.高德地图获取微信sdk,压缩包,解压获取js文件。
02.放入自己的项目中,使用页面引入。
03.放置map dom标签,给个经纬度。
ok