H5中实现高德地图位置搜索,地图选点

需求是在 H5 页面中实现地图位置搜索,并且选点

实现过程:

如果没有高德的 key 请先申请

获取高德 Map

const amap = function (key) {
  return new Promise((resolve) => {
    let url = `https://webapi.amap.com/maps?v=1.4.5&key=${key}&callback=AMapLoad`;
    let script = document.createElement("script");
    script.src = url;
    script.charset = "utf-8";

    document.body.appendChild(script);
    window.AMapLoad = function () {
      resolve(window.AMap);
    };
  });
};
amap("高德的key").then((amap) => {
  this.searchAddressMethod(amap); //这个amap就是高德的地图对象Map
});

定义模板

<view class="item">
  <view>搜索：</view>
  <input type="text" id="keyword" style="height: 64rpx; line-height: 64rpx; width: 560rpx;" placeholder="关键字：如杭州市萧山区" @input="onInput" />
  </view>
  <view id="mapContainer"></view>

  <view class="item">
    <view>经纬度：</view>
    <view class="content" v-if="lng && !loadFail">{{ lng }},{{ lat }}</view>
  </view>

  <view class="item">
    <view>城市：</view>
    <view class="content">{{ city }} </view>
  </view>

  <view class="item">
  <view>地址：</view>
  <view class="content">{{ selectAddress }}</view>
</view>

onInput

function onInput(e) {
  const that = this;
  if (that.timeout) clearTimeout(that.timeout);
  this.timeout = setTimeout(() => {
    let placeSearch = new AMap.PlaceSearch({
      map: that.map,
      pageSize: 1, // 设置提醒点数量
    });
    placeSearch.search(e.detail.value);
  }, 300);
}

searchAddressMethod 方法

function searchAddressMethod() {
  const self = this;
  let apis = [
    "AMap.CitySearch",
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Geocoder",
    "AMap.ToolBar",
  ];
  AMap.plugin(apis, function () {
    var citySearch = new AMap.CitySearch();
    var map;
    // 城市定位 begin
    citySearch.getLocalCity(function (status, result) {
      if (status === "complete" && result.info === "OK") {
        // 查询成功，result即为当前所在城市信息
        console.log(result);
        let rectangle = result.rectangle.split(";")[1].split(",");
        self.lnglat = rectangle.map(Number);
        // 初始化地图 begin
        map = new AMap.Map("mapContainer", {
          resizeEnable: true,
          // center: self.lnglat,//地图中心点
          zoom: self.zoom, //地图显示的缩放级别
          keyboardEnable: false,
        });
        self.map = map;
        map.addControl(new AMap.ToolBar());
        // 初始化地图 end

        // 绑定点击事件 begin
        let marker, geocoder;
        AMap.event.addListener(map, "click", function (e) {
          // 创建标记 begin
          if (marker != null) {
            marker.setMap(null);
          }
          // 修改
          var icon = new AMap.Icon({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            imageOffset: new AMap.Pixel(0, -60),
            // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(35, 40), // 根据所设置的大小拉伸或压缩图片
          });

          marker = new AMap.Marker({
            icon: icon, // 添加 Icon 实例
            position: e.lnglat,
            offset: new AMap.Pixel(-10, -10),
          });
          marker.setMap(map);
          // 创建标记 end

          // 解析位置 begin
          // 获取经纬度
          self.lat = e.lnglat.lat;
          self.lng = e.lnglat.lng;
          if (!geocoder) {
            geocoder = new AMap.Geocoder({
              // city: "010", //城市设为北京，默认：“全国”
              radius: 1000, //范围，默认：500
            });
          }

          geocoder.getAddress(e.lnglat, function (status, result) {
            if (status === "complete" && result.regeocode) {
              console.log(result);
              var address = result.regeocode.formattedAddress;
              var province = result.regeocode.addressComponent.province;
              var city = result.regeocode.addressComponent.city || province;
              console.log(address);
              self.selectAddress = address;
              self.city = city;
            } else {
              log.error("根据经纬度查询地址失败");
            }
          });
          // 解析位置 end
        });
        // 绑定点击事件 end
      } else {
        self.loadFail = 1;
        self.lng = 0.0001;
        self.lat = 0.0001;
      }
    });
    // 城市定位 end
  });
}

实现效果