uniapp 自定义map组件

uniapp 自定义map组件
1、地图附近相关数据引用高德
2、key自己申请
3、附带城市选择
4、项目引入的是graceui，请自行修改
5、调用相关自行处理
注意：直接引用不可用，uniapp sdk升级后中心点和maekers相关只改为可用，没做优化 仅限参考、仅限参考、仅限参考

addressChoose.vue

<template>
    <aPage :footerHeight="0">
        <!-- 页面头部 -->
        <view slot="gHeader" class="grace-header-body" style="background-color: #fff;">
            <text class="grace-header-icons grace-icons icon-back grace-block" @tap="closeChoose"></text>
            <view class="grace-header-content"><view style="width:100%;text-align: center;">选择位置</view></view>
            <text class="mapSure" @tap="sureMap" style="margin-right: 20rpx;">完成</text>
        </view>
        <!-- 页面主体 -->
        <view slot="gBody" style="position: relative;" class="grace-bg-body">
            <!-- 页面主体 -->
            <view class="grace-body gracedy" style="position: relative; ">
                <view class="serchCont">
                    <view class="searchbox">
                        <view class="cityName" @tap="shouwCity(true)">
                            <text class="city">{
   {
    city }}</text>
                            <text class="icon-arrow-down grace-header-icons grace-icons grace-gray seliocn"></text>
                        </view>
                        <view class="shu">|</view>
                        <view class=""><graceSearch @inputting="onKeyInput" @clear="clearText" @confirm="onKeyInput" :kwd="serarchText" placeholder="搜索地点"></graceSearch></view>
                    </view>
                </view>
                <view class="" style="width: 100%; height: 600rpx;overflow: hidden;" v-show="!mapHiden" @touchmove.stop="">
                    <!-- #ifdef APP-PLUS -->
                    <map
                        id="map1"
                        ref="map1"
                        style="width: 100%; height: 600rpx;"
                        :latitude="latitude"
                        :longitude="longitude"
                        @regionchange="selectMap"
                        show-location
                        :scale="16"
                    ></map>
                    <!-- #endif -->
                    <!-- #ifdef H5 -->
                    <map
                        id="map1"
                        ref="map1"
                        style="width: 100%; height: 600rpx;"
                        :markers="covers"
                        :latitude="latitude"
                        :longitude="longitude"
                        @regionchange="selectMap"
                        show-location
                        :scale="15"
                    ></map>
                    <!-- #endif -->
                </view>
                <view class="">
                    <view class="tmapList" :class="mapHiden ? 'tmapList1' : ''" v-if="!mapHiden">
                        <view class="mapSing" v-for="(item, index) in mapResult" :key="index" @tap="selectAddress(item)">
                            <view class="mapleflt">
                                <view class="weiz">{
   {
    index == 0 && !mapHiden && !showads ? '我的位置' : item.name }}</view>
                                <view class="adress">{
   {
    typeof item.address == 'string' ? item.address : '' }}</view>
                            </view>
                            <view class="mapright"><image src="/static/img/map/currentPos.png" mode="" v-if="item.check"></image></view>
                        </view>
                    </view>
                    <view class="tmapList" :class="mapHiden ? 'tmapList1' : ''" v-else>
                        <view class="mapSing" v-for="(item, index) in keyResult" :key="index" @tap="keySelect(item)">
                            <view class="mapleflt">
                                <view class="weiz">{
   {
    item.name }}</view>
                                <view class="adress">{
   {
    typeof item.address == 'string' ? item.address : '' }}</view>
                            </view>
                            <view class="mapright"><image src="/static/img/map/currentPos.png" mode="" v-if="item.check"></image></view>
                        </view>
                    </view>
                </view>
            </view>

            <selectCity v-show="showModule" ref="selectCity" @chooseCity="chooseCity" style="position: fixed;top: 0;left: 0;z-index: 9999999;background-color: #fff;"></selectCity>
        </view>
    </aPage>
</template>

<script>
import selectCity from '@/components/selectCity.vue';
export default {
   
    data() {
   
        return {
   
          key: '',
          cities: [],
	      addressName: "",
	      weather: {
   
	        hasData: false,
	        data: [],
	      },
	      title: "map",
	      address: {
   },
	      latitude: 31.972952,
	      longitude: 118.78025,
	      searchNeary: 4000,
	      covers: [
	        {
   
	          width: 20,
	          height: 20,
	          latitude: 31.972952,
	          longitude: 118.78025,
	          iconPath: "/static/images/common/location.png",
	          address: "",
	          name: "",
	        },
	      ],
	      icon: "https://p-yy-yjy.oss-cn-shanghai.aliyuncs.com/static/images/20220106/1141641459414_.pic.jpg",
	      map: null,
	      mapCtx: null,
	      keyResult: [],
	      mapResult: [],
	      mapHiden: false,
	      inputClearValue: "",
	      showClearIcon: false,
	      serarchText: "",
	      keyUser: {
   },
	      shoeLoding: false,
	      showModule: false,
	      mapCtx: {
   },
	      city: "南京市",
	      showads: false,
	      tindex: 0,
	      searchKey: "",
	      selectKey: {
   },
	      haveData: false,
        };
    },
   components: {
   
    selectCity,
  },
  onReady() {
   
    console.log("onReady");
    // #ifdef APP-PLUS
    this.newMap();
    // #endif
  },
  onLoad: function (e) {
   
    this._select = e.s;
    // if (this._select) {
   
    //   this.obtainAddres(this._select);
    // }
    this.obtainAddres(this._select);

    this.haveData = true;
  },
  onShow() {
   },
  methods: {
   
    loadScrpit(address, bol) {
   
      console.log("addressChoose loadScrpit");
      let self = this;
      var map = new AMap.Map("map1", {
   
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        zoomToAccuracy: true,
        zoom: 15,
        scrollWheel: false,
        dragEnable: true, //是否可拖动
        resizeEnable: true,
        rotateEnable: true,
        buttonPosition: "RB",
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        center:
          address && address.lng
            ? [address.lng, address.lat]
            : [118.78025, 31.972952], //初始化地图中心点
      });
      self.map = map;
      console.log("addressChoose map init ");
      if ("https:" == location.protocol) {
   
        map.plugin(["AMap.Geolocation"], function () {
   
          let geolocation = new AMap.Geolocation({
   
            enableHighAccuracy: true, //  是否使用高精度定位，默认:true
            timeout: 10000, //  超过10秒后停止定位，默认：无穷大
            maximumAge: 0, // 定位结果缓存0毫秒，默认：0
            convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, //  显示定位按钮，默认：true
            buttonPosition: "LB", // 定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20), //  定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true, //  定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, //  定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, //  定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          });
          // console.log("addressChoose map Geolocation ");

          map.addControl(geolocation);
          // geolocation.getCurrentPosition()
          AMap.event.addListener(geolocation, "complete", (res) => {
   
            console.log(
              "addressChoose map Geolocation complete ",
              JSON.stringify(res)
            );
            if