1、使用uni-app内置的map组件map | uni-app官网

2、去高德地图申请key，然后下载所需要的插件，详见入门指南-微信小程序插件 | 高德地图API

3、上代码

下载amap-wx.js 文件后需要修改一下代码：

function AMapWX(a) {
    this.key = a.key, this.requestConfig = {
        key: a.key,
        s: "rsx",
        platform: "WXJS",
        appname: a.key,
        sdkversion: "1.2.0",
        logversion: "2.0"
    }
}
AMapWX.prototype.getWxLocation = function(a, b) {
    uni.getLocation({
        type: "gcj02",
        success: function(a) {
            var c = a.longitude + "," + a.latitude;
            uni.setStorage({
                key: "userLocation",
                data: c
            }), b(c)
        },
        fail: function(c) {
            uni.getStorage({
                key: "userLocation",
                success: function(a) {
                    a.data && b(a.data)
                }
            }), a.fail({
                errCode: "0",
                errMsg: c.errMsg || ""
            })
        }
    })
}, AMapWX.prototype.getRegeo = function(a) {
    function c(c) {
        var d = b.requestConfig;
        uni.request({
            url: "https://restapi.amap.com/v3/geocode/regeo",
            data: {
                key: b.key,
                location: c,
                extensions: "all",
                s: d.s,
                platform: d.platform,
                appname: b.key,
                sdkversion: d.sdkversion,
                logversion: d.logversion
            },
            method: "GET",
            header: {
                "content-type": "application/json"
            },
            success: function(b) {
                var d, e, f, g, h, i, j, k, l;
                b.data.status && "1" == b.data.status ? (d = b.data.regeocode, e = d.addressComponent, f = [], g = "", d && d.roads[
                        0] && d.roads[0].name && (g = d.roads[0].name + "附近"), h = c.split(",")[0], i = c.split(",")[1], d.pois && d
                    .pois[0] && (g = d.pois[0].name + "附近", j = d.pois[0].location, j && (h = parseFloat(j.split(",")[0]), i =
                        parseFloat(j.split(",")[1]))), e.provice && f.push(e.provice), e.city && f.push(e.city), e.district && f.push(
                        e.district), e.streetNumber && e.streetNumber.street && e.streetNumber.number ? (f.push(e.streetNumber.street),
                        f.push(e.streetNumber.number)) : (k = "", d && d.roads[0] && d.roads[0].name && (k = d.roads[0].name), f.push(
                        k)), f = f.join(""), l = [{
                        iconPath: a.iconPath,
                        width: a.iconWidth,
                        height: a.iconHeight,
                        name: f,
                        desc: g,
                        longitude: h,
                        latitude: i,
                        id: 0,
                        regeocodeData: d
                    }], a.success(l)) : a.fail({
                    errCode: b.data.infocode,
                    errMsg: b.data.info
                })
            },
            fail: function(b) {
                a.fail({
                    errCode: "0",
                    errMsg: b.errMsg || ""
                })
            }
        })
    }
    var b = this;
    a.location ? c(a.location) : b.getWxLocation(a, function(a) {
        c(a)
    })
}, AMapWX.prototype.getWeather = function(a) {
    function d(d) {
        var e = "base";
        a.type && "forecast" == a.type && (e = "all"), uni.request({
            url: "https://restapi.amap.com/v3/weather/weatherInfo",
            data: {
                key: b.key,
                city: d,
                extensions: e,
                s: c.s,
                platform: c.platform,
                appname: b.key,
                sdkversion: c.sdkversion,
                logversion: c.logversion
            },
            method: "GET",
            header: {
                "content-type": "application/json"
            },
            success: function(b) {
                function c(a) {
                    var b = {
                        city: {
                            text: "城市",
                            data: a.city
                        },
                        weather: {
                            text: "天气",
                            data: a.weather
                        },
                        temperature: {
                            text: "温度",
                            data: a.temperature
                        },
                        winddirection: {
                            text: "风向",
                            data: a.winddirection + "风"
                        },
                        windpower: {
                            text: "风力",
                            data: a.windpower + "级"
                        },
                        humidity: {
                            text: "湿度",
                            data: a.humidity + "%"
                        }
                    };
                    return b
                }
                var d, e;
                b.data.status && "1" == b.data.status ? b.data.lives ? (d = b.data.lives, d && d.length > 0 && (d = d[0], e = c(
                    d), e["liveData"] = d, a.success(e))) : b.data.forecasts && b.data.forecasts[0] && a.success({
                    forecast: b.data.forecasts[0]
                }) : a.fail({
                    errCode: b.data.infocode,
                    errMsg: b.data.info
                })
            },
            fail: function(b) {
                a.fail({
                    errCode: "0",
                    errMsg: b.errMsg || ""
                })
            }
        })
    }

    function e(e) {
        uni.request({
            url: "https://restapi.amap.com/v3/geocode/regeo",
            data: {
                key: b.key,
                location: e,
                extensions: "all",
                s: c.s,
                platform: c.platform,
                appname: b.key,
                sdkversion: c.sdkversion,
                logversion: c.logversion
            },
            method: "GET",
            header: {
                "content-type": "application/json"
            },
            success: function(b) {
                var c, e;
                b.data.status && "1" == b.data.status ? (e = b.data.regeocode, e.addressComponent ? c = e.addressComponent.adcode :
                    e.aois && e.aois.length > 0 && (c = e.aois[0].adcode), d(c)) : a.fail({
                    errCode: b.data.infocode,
                    errMsg: b.data.info
                })
            },
            fail: function(b) {
                a.fail({
                    errCode: "0",
                    errMsg: b.errMsg || ""
                })
            }
        })
    }
    var b = this,
        c = b.requestConfig;
    a.city ? d(a.city) : b.getWxLocation(a, function(a) {
        e(a)
    })
}, AMapWX.prototype.getPoiAround = function(a) {
    function d(d) {
        var e = {
            key: b.key,
            location: d,
            s: c.s,
            platform: c.platform,
            appname: b.key,
            sdkversion: c.sdkversion,
            logversion: c.logversion
        };
        a.querytypes && (e["types"] = a.querytypes), a.querykeywords && (e["keywords"] = a.querykeywords), uni.request({
            url: "https://restapi.amap.com/v3/place/around",
            data: e,
            method: "GET",
            header: {
                "content-type": "application/json"
            },
            success: function(b) {
                var c, d, e, f;
                if (b.data.status && "1" == b.data.status) {
                    if (b = b.data, b && b.pois) {
                        for (c = [], d = 0; d < b.pois.length; d++) e = 0 == d ? a.iconPathSelected : a.iconPath, c.push({
                            latitude: parseFloat(b.pois[d].location.split(",")[1]),
                            longitude: parseFloat(b.pois[d].location.split(",")[0]),
                            iconPath: e,
                            width: 22,
                            height: 32,
                            id: d,
                            name: b.pois[d].name,
                            address: b.pois[d].address
                        });
                        f = {
                            markers: c,
                            poisData: b.pois
                        }, a.success(f)
                    }
                } else a.fail({
                    errCode: b.data.infocode,
                    errMsg: b.data.info
                })
            },
            fail: function(b) {
                a.fail({
                    errCode: "0",
                    errMsg: b.errMsg || ""
                })
            }
        })
    }
    var b = this,
        c = b.requestConfig;
    a.location ? d(a.location) : b.getWxLocation(a, function(a) {
        d(a)
    })
}, AMapWX.prototype.getStaticmap = function(a) {
    function f(b) {
        c.push("location=" + b), a.zoom && c.push("zoom=" + a.zoom), a.size && c.push("size=" + a.size), a.scale && c.push(
                "scale=" + a.scale), a.markers && c.push("markers=" + a.markers), a.labels && c.push("labels=" + a.labels), a.paths &&
            c.push("paths=" + a.paths), a.traffic && c.push("traffic=" + a.traffic);
        var e = d + c.join("&");
        a.success({
            url: e
        })
    }
    var e, b = this,
        c = [],
        d = "https://restapi.amap.com/v3/staticmap?";
    c.push("key=" + b.key), e = b.requestConfig, c.push("s=" + e.s), c.push("platform=" + e.platform), c.push("appname=" +
            e.appname), c.push("sdkversion=" + e.sdkversion), c.push("logversion=" + e.logversion), a.location ? f(a.location) :
        b.getWxLocation(a, function(a) {
            f(a)
        })
}, AMapWX.prototype.getInputtips = function(a) {
    var b = this,
        c = b.requestConfig,
        d = {
            key: b.key,
            s: c.s,
            platform: c.platform,
            appname: b.key,
            sdkversion: c.sdkversion,
            logversion: c.logversion
        };
    a.location && (d["location"] = a.location), a.keywords && (d["keywords"] = a.keywords), a.type && (d["type"] = a.type),
        a.city && (d["city"] = a.city), a.citylimit && (d["citylimit"] = a.citylimit), uni.request({
            url: "https://restapi.amap.com/v3/assistant/inputtips",
            data: d,
            method: "GET",
            header: {
                "content-type": "application/json"
            },
            success: function(b) {
                b && b.data && b.data.tips && a.success({
                    tips: b.data.tips
                })
            },
            fail: function(b) {
                a.fail({
                    errCode: "0",
                    errMsg: b.errMsg || ""
                })
            }
        })
}, AMapWX.prototype.getDrivingRoute = function(a) {
    var b = this,
        c = b.requestConfig,
        d = {
            key: b.key,
            s: c.s,
            platform: c.platform,
            appname: b.key,
            sdkversion: c.sdkversion,
            logversion: c.logversion
        };
    a.origin && (d["origin"] = a.origin),
        a.destination && (d["destination"] = a.destination),
        a.strategy && (d["strategy"] = a.strategy),
        a.waypoints && (d["waypoints"] = a.waypoints),
        a.avoidpolygons && (d["avoidpolygons"] = a.avoidpolygons),
        a.avoidroad && (d["avoidroad"] = a.avoidroad),
        uni.request({
            url: "https://restapi.amap.com/v3/direction/driving",
            data: d,
            method: "GET",
            header: {
                "content-type": "application/json"
            },
            success: function(b) {
                b && b.data && b.data.route && a.success({
                    paths: b.data.route.paths,
                    taxi_cost: b.data.route.taxi_cost || ""
                })
            },
            fail: function(b) {
                a.fail({
                    errCode: "0",
                    errMsg: b.errMsg || ""
                })
            }
        })
}, AMapWX.prototype.getWalkingRoute = function(a) {
    var b = this,
        c = b.requestConfig,
        d = {
            key: b.key,
            s: c.s,
            platform: c.platform,
            appname: b.key,
            sdkversion: c.sdkversion,
            logversion: c.logversion
        };
    a.origin && (d["origin"] = a.origin), a.destination && (d["destination"] = a.destination), uni.request({
        url: "https://restapi.amap.com/v3/direction/walking",
        data: d,
        method: "GET",
        header: {
            "content-type": "application/json"
        },
        success: function(b) {
            b && b.data && b.data.route && a.success({
                paths: b.data.route.paths
            })
        },
        fail: function(b) {
            a.fail({
                errCode: "0",
                errMsg: b.errMsg || ""
            })
        }
    })
}, AMapWX.prototype.getTransitRoute = function(a) {
    var b = this,
        c = b.requestConfig,
        d = {
            key: b.key,
            s: c.s,
            platform: c.platform,
            appname: b.key,
            sdkversion: c.sdkversion,
            logversion: c.logversion
        };
    a.origin && (d["origin"] = a.origin), a.destination && (d["destination"] = a.destination), a.strategy && (d[
        "strategy"] = a.strategy), a.city && (d["city"] = a.city), a.cityd && (d["cityd"] = a.cityd), uni.request({
        url: "https://restapi.amap.com/v3/direction/transit/integrated",
        data: d,
        method: "GET",
        header: {
            "content-type": "application/json"
        },
        success: function(b) {
            if (b && b.data && b.data.route) {
                var c = b.data.route;
                a.success({
                    distance: c.distance || "",
                    taxi_cost: c.taxi_cost || "",
                    transits: c.transits
                })
            }
        },
        fail: function(b) {
            a.fail({
                errCode: "0",
                errMsg: b.errMsg || ""
            })
        }
    })
}, AMapWX.prototype.getRidingRoute = function(a) {
    var b = this,
        c = b.requestConfig,
        d = {
            key: b.key,
            s: c.s,
            platform: c.platform,
            appname: b.key,
            sdkversion: c.sdkversion,
            logversion: c.logversion
        };
    a.origin && (d["origin"] = a.origin), a.destination && (d["destination"] = a.destination), uni.request({
        url: "https://restapi.amap.com/v4/direction/bicycling",
        data: d,
        method: "GET",
        header: {
            "content-type": "application/json"
        },
        success: function(b) {
            b && b.data && b.data.data && a.success({
                paths: b.data.data.paths
            })
        },
        fail: function(b) {
            a.fail({
                errCode: "0",
                errMsg: b.errMsg || ""
            })
        }
    })
}, module.exports.AMapWX = AMapWX;
 

视图：

<view class="el-vue-search-box-container">
             <view class="section-search">
               <input placeholder="请输入" v-model="searchValue" type="text" @input="searchMap"></input><span class="search-btn" @tap="searchCurrentLocation">搜索</span>
             </view>
            <view class="search-tips" v-if="searchList.length>0 && isShowSearchList">
                <ul>
                    <li @tap="getCurrentSingleLocation(item)" v-for="item in searchList">{{item.name}}</li>
                </ul>
            </view>
         </view>
         
        <view class="content" style="width:100%;height: 80%;">
            <map class="map" id="map" :latitude="latitude" :longitude="longitude" scale="18" show-location="true"
                :markers="markers" @tap="getCurrentLocation"></map>        
        </view>
        <view class="address">您选择的地址是：{{ addressMap }}</view>
        <u-button style="position: fixed; left: 0; bottom: 3px; width: 100%" type="primary" @click="submit()">确 定
        </u-button>

页面引用并使用

import amap from '@/libs/amap-wx.js';
export default {
    data(){
       return{
            addressMap: "",
            searchValue: "",
            markers: [], 
            amapPlugin: null,
            key: '', //高德地图key
            latitude: '',
            longitude: '',
            regeocodeData:{},
            searchList:[],
            isShowSearchList:false,
        }
    },
    mounted() {
            this.init();
        },
        methods: {
            init() {
                this.amapPlugin = new amap.AMapWX({
                    key: this.key
                });
                this.amapPlugin.getRegeo({
                    success: (data) => {
                        this.latitude = data[0].latitude;
                        this.longitude = data[0].longitude;
                        this.markers = [
                            {
                                id:1,
                                longitude: data[0].longitude,
                                latitude: data[0].latitude,
                                iconPath:'../../static/img/mark_bs.png',
                                width:35,  
                                height:50
                            }
                        ]
                        this.addressMap = data[0].regeocodeData.formatted_address;
                        this.regeocodeData = data[0].regeocodeData
                        uni.hideLoading();
                    },
                    fail: (info)=> {
                        //失败回调
                        console.log("getRegeo", info)
                    }
                });
            },
            //点击地图
            getCurrentLocation(e) {
                //console.log(e);
                /* 更新地图中心点位 start */
                this.latitude = e.detail.latitude;
                this.longitude = e.detail.longitude;
                /* 更新地图中心点位 end */
                this.markers = [
                    {
                        id:1,
                        longitude: e.detail.longitude,
                        latitude: e.detail.latitude,
                        iconPath:'../../static/img/mark_bs.png',
                        width:35,
                        height:50
                    }
                ]
                let coordinate = e.detail.longitude + "," + e.detail.latitude;
                this.amapPlugin.getRegeo({
                    iconPathSelected: '../../static/img/mark_bs.png', //如：..­/..­/img/marker_checked.png
                    location:coordinate,
                    success: (data) => {
                        //console.log(data)
                        //this.addressName = data[0].name;  
                        this.addressMap = data[0].regeocodeData.formatted_address;
                        this.regeocodeData = data[0].regeocodeData
                    },
                    fail: (info)=> {
                        //失败回调
                        console.log("getRegeo", info)
                    }
                });
            },
            //搜索关键字
            searchMap(){
                this.amapPlugin.getInputtips({
                    key: this.key,
                    keywords: this.searchValue,
                    location: this.longitude + ',' + this.latitude,
                    success: (data) => {
                        //console.log(data);
                        this.searchList = data.tips;
                        //隐藏搜索结果
                        this.isShowSearchList = true;
                    },
                    fail: (info)=> {
                        //失败回调
                        console.log("查询关键字", info)
                    }
                })
            },
            getCurrentSingleLocation(data){
                let coordinate = data.location.split(',');
                this.markers = [
                    {
                        id:1,
                        longitude: coordinate[0],
                        latitude: coordinate[1],
                        iconPath:'../../static/img/mark_bs.png',
                        width:35,
                        height:50
                    }
                ]
                /* 更新地图中心点位 start */
                this.latitude = coordinate[1];
                this.longitude = coordinate[0];
                /* 更新地图中心点位 end */
                this.searchValue = data.name
                this.amapPlugin.getRegeo({
                    iconPathSelected: '../../static/img/mark_bs.png', //如：..­/..­/img/marker_checked.png
                    location:data.location,
                    success: (data) => {
                        //console.log(data)
                        //this.addressName = data[0].name;  
                        this.addressMap = data[0].regeocodeData.formatted_address;
                        this.regeocodeData = data[0].regeocodeData;
                        this.isShowSearchList = false;
                    },
                    fail: (info)=> {
                        //失败回调
                        console.log("getRegeo", info)
                    }
                });
            },
            //根据具体搜索结果查询
            searchCurrentLocation(data){
                this.amapPlugin.getInputtips({
                    key: this.key,
                    keywords: this.searchValue,
                    location: this.longitude + ',' + this.latitude,
                    success: (data) => {
                        //console.log(data);
                        let tempList = data.tips;
                        if(tempList.length >0){
                            for(let i in tempList){
                                if(tempList[i].name === this.searchValue){
                                    this.getCurrentSingleLocation(tempList[i]);
                                    break;
                                }
                            }
                        }
                        //隐藏搜索结果
                        this.isShowSearchList = false;
                    },
                    fail: (info)=> {
                        //失败回调
                        console.log("查询关键字", info)
                    }
                })
            },
            submit() {
                if (!this.addressMap) {
                    return;
                }
                if(JSON.stringify(this.regeocodeData) != '{}'){
                    let area = this.regeocodeData.addressComponent.district;
                    let areaCode = this.regeocodeData.addressComponent.adcode;
                    let township = this.regeocodeData.addressComponent.township;
                        this.$emit("update:address", this.addressMap);
                        this.$emit(
                            "update:areaAndStree",
                            area + township + this.addressMap
                        );
                        this.$emit("update:area", areaCode);
                        this.$emit("update:reportStreet", (typeof township == 'string') ? township : '');
                        this.show_ = false;
                        this.$emit("confirm");
                    }
                }
                
            }
}

<style lang="scss" scoped>
    ul,ul li{
        list-style: none;
    }
    .map_container {
        position: absolute;
        top: 0;
        bottom: 80px;
        left: 0;
        right: 0;
    }

    .map {
        width: 100%;
        height: 100%;
    }

    .map_text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0px;
        height: 80px;
        background: #fff;
        padding: 0 15px;
    }
    .el-vue-search-box-container{
        position: fixed;
        background: #fff;
        box-shadow: 0 2px 2px raba(0,0,0,.15);
        border-radius: 2px 3px 3px 2px;
        z-index: 10;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: #fff;
        width: 80%;
        .search-tips{
            position: absolute;
            top: 100%;
            border: 1px solid #dbdbdb;
            background: #fff;
            overflow: auto;
            max-width: 80%;
            >ul{
                >li{
                    height: 40px;
                    line-height: 40px;
                    box-shadow: 0 1px 1px rgba(0,0,0,.1);
                    padding: 0 10px;
                    cursor: pointer;
                }
            }
        }
        .section-search{
            display: flex;
            align-items: center;
            padding:0 20rpx;
            flex-direction: row;
            justify-content: space-between;
            height: 80rpx;
            line-height: 80rpx;
        }
    }
    
</style>