微信小程序 uniapp使用地图定位

实现效果 类似下图

1.首先要注册高德地图，然后下载微信小程序SDK   微信小程序sdk也支持app端使用。

2.去高德控制台 管理中心 》 应用管理 》新建应用

需要在哪些平台使用，就在对应的应用中创建对应的key。

创建android平台key时需要提拱 发布版安全码SHA1 （就是安卓证书的SHA1）、PackageName（就是你应用的包名）

创建ios平台key时需要提供  安全码Bundle ID（就是你应用的包名）

将这些key 填入你项目文件manifest.json下的  App SDK配置中就可以

3.引入

将下载好的微信小程序sdk文件放下项目根目录js_sdk 文件中

4.使用

在有需要的页面 引入

import amap from "@/js_sdk/js-amap/amap-wx.130.js";

<template>
    <view class="declare-container page-bottom">
        <scroll-view class="face-boss" scroll-y="true">
            <view class="declare">
                <view style="padding: 0 30rpx;">
                    <u-form :model="form" ref="declareForm" :rules="rules" label-width="180" :border-bottom="true">
                        <u-card class="declare-item" :full="true" padding="0">
                            <view class="declare-item-contents" slot="body">
                                <u-form-item label="检验地点" prop="examineArea" required>
                                        <u-input v-model="form.examineArea" type="select" :select-open="areaShow" @click="openArea" placeholder="请选择检验地点"/>
                                </u-form-item>
                                <map
                                        v-show="isShowMap"
                                        id="map_container" 
                                        :latitude="latitude"
                                        :longitude="longitude"
                                        scale="11"
                                        :markers="markers"
                                        :show-location="true"
                                        @markertap="markertap"
                                        @updated='mapUpdated'
                                        @tap='closeMapMarker'
                                ></map>
                            </view>
                        </u-card>
                    </u-form>
                </view>
            </view>
        </scroll-view>
        <view>
            <u-select safe-area-inset-bottom mode="single-column" :list="areaList" v-model="areaShow" label-name="name" value-name="id" @confirm="areaConfirm"></u-select>
        </view>
    </view>
</template>
<script>

import amap from "@/js_sdk/js-amap/amap-wx.130.js";
export default {
  data() {
    return {
            mapKey: '申请的mapKey',
            amapPlugin: null,
            latitude: '',
            longitude: '',
            markers: [],
            mapInfo: {},
            address: '',
            form: {},
            rules: {},
            // 检验地点
            areaShow: false,
            areaList: [],
            isShowMap: false, // 是否显示地图

    };
},
onReady () {
        this.$refs.declareForm.setRules(this.rules)
        this.getAreaList()
},
onLoad() {
    this.amapPlugin = new amap.AMapWX({
            key: this.mapKey, //该key 是在高德中申请的微信小程序key
    });
},
methods: {
    markertap () {},
    mapUpdated () {},
    closeMapMarker () {},
    getAddress(latitude, longitude) {
        var that = this
        that.amapPlugin.getRegeo({
            location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度' 
            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]
                that.address = res[0].regeocodeData.formatted_address
                that.isShowMap = true
                var temp = {
                        // icon: './img/shiplist.png',
                        id: res[0].id,
                        latitude: latitude,
                        longitude: longitude,
                        width: 26,
                        height: 30,
                        title: ''
                }

                that.markers = [temp]
            },
            fail: (res) => {
                console.log(JSON.stringify(res))
            },
        });
    },
    getAreaList () {
        this.areaList = []
    },
    openArea () {
        if (!this.areaShow) {
            this.areaShow = true
        }
    },
    areaConfirm (e) {
        const data = e[0]
        var list = this.areaList.filter(item=>item.id==data.value)
        if (list.length >0) {
                this.form.examineArea = list[0].name
                this.form.simpleArea = list[0].simpleArea
                this.getAddress(list[0].lat, list[0].lon)
        }
    },
  },
};

</script>
<style lang="scss" scoped>
.declare-container {
  .declare {
	#map_container{
		width: 100%;
		height: 300rpx;
	}
  }	
}
</style>