ar导航高德地图_高德网页版地图

高德地图api 封装成公共方法用于项目中

目前封装的方法有

• 定位
• 点标记
• 比例尺插件
• 信息窗体
• 经纬度附近搜索
• 关键字搜索
• 交通路径规划（经纬度或地点名）
• 步行路径规划（经纬度或地点名）
• 经纬度获取地址

入参建议改成对象形式，比较灵活

项目结构

1 主要文件作用

1.1、initMap.js 高德地图api的引入、及注册

import AMapLoader from '@amap/amap-jsapi-loader'
const initMap = async (config) => {
  return new Promise((resolve, reject) => {
    AMapLoader.load({
      "key": config.key,
      "version": "1.4.15",
      "plugins": [
        'AMap.PolygonEditor' // 插件
      ],
      "AMapUI": {
        "version": '1.1',
        "plugins": [],
      },
      "Loca": {
        "version": '1.3.2'
      },
    }).then((AMap) => {
      resolve(AMap)
    }).catch(err => {
      reject(err)
    })
  })
}
export default initMap

1.2 map.js 高德地图api封装方法集合

import initMap from './initMap.js'
export const init = (container, props) => {
  const config = {
    key: '你的key值'
  }
  return new Promise((resolve, reject) => {
    initMap(config).then(AMap => {
      resolve(new AMap.Map(container, { ...props }))
    }).catch(err => {
      reject(err)
    })
  })
}

/**
 * 
 * @method {*} getCurrentPosition 定位
 * @param {*} map 地图实例
 * @param {Function} success 定位成功的回调
 * @param {Function} fail 定位失败的回调
 * @param {Object} otherProps 其他参数，如有需要的话 具体api见https://lbs.amap.com/api/javascript-api/reference/location#m_AMap.Geolocation
 */
export const getCurrentPosition = (map, success, fail, otherProps) => {
  AMap.plugin('AMap.Geolocation', function() {
    var geolocation = new AMap.Geolocation({
      enableHighAccuracy: false,//是否使用高精度定位，默认:true
      timeout: 10000,        
      maximumAge: 0,           
      convert: true,          
      showButton: true,      
      buttonPosition: 'RB',  
      showMarker: true,     
      showCircle: true,   
      panToLocation: true, 
      zoomToAccuracy: false,  
      ...otherProps
    })
    map.addControl(geolocation);
    geolocation.getCurrentPosition()
    AMap.event.addListener(geolocation, 'complete', onComplete)
    AMap.event.addListener(geolocation, 'error', onError)
    function onComplete(data) {
      success(data)
    }
    function onError(err) {
      fail(err)
    }
  })
}

/**
 * @method {*} addMarker 添加点标记
 * @param {*} map 地图实例
 * @param {Array} marker 需要定位的点经纬度集合，结构如 [{ lng: 116.39, lat: 39.9 ，otherProps:{title:'广州'}}]
 * @param {Function} callback 点标记点击事件回调
 * @param {Object} otherProps 定位其他属性，止于marker对象数组里面 具体api见https://lbs.amap.com/api/javascript-api/reference/overlay#marker
 * @returns 点标记集合markers
 */
export const addMarker = (map, marker, callback) => {
  var markers = marker.map(e => {
    var mark = new AMap.Marker({
      position: [e.lng, e.lat],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      ...e.otherProps
    });
    if (callback) mark.on('click', callback);
    return mark
  })
  map.add(markers);
  return markers
}
/**
 * @method {*} addMarker 移除点标记
 * @param {*} map 地图实例
 * @param {Array} marker 由addMarker返回的点标记集合
 */
export const removeMarker = (map, marker) => {
  map.remove(marker);
}
/**
 * @param {*} map 地图实例
 * @param {Boolean} noScale 不需要比例尺  true表示不需要
 * @param {Boolean} noToolBar 不需要工具栏 true表示不需要
 */
export const initScaleTools = (map, noScale, noToolBar) => {
  if (!noScale) {
    map.plugin(["AMap.Scale"], function() {
      var scale = new AMap.Scale();
      map.addControl(scale);
    });
  }
  if (!noToolBar) {
    map.plugin(["AMap.ToolBar"], function() {
      var tool = new AMap.ToolBar();
      map.addControl(tool);
    });
  }
}
/**
 * 信息窗体
 * @param {*} map 地图实例
 * @param {Array} center 经纬度
 * @param {String} content 信息窗体内容
 */
export const showInfoWindow = (map, center, content) => {
  var infoWindow = new AMap.InfoWindow({
    content: content
  });
  infoWindow.open(map, center);
}
/**
 * 
 * @param {*} map 地图实例
 * @param {Array} center 经纬度
 * @param {Number} radius 取值范围：0-50000 范围
 * @param {Object} otherProps  city 页码等其他参数
 * @param {Function} callback 回调
 * @param {String} keyword 搜索关键字
 * https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.PlaceSearch
 */
export const searchNearBy = (map, center, callback, otherProps, keyword, radius) => {
  map.clearMap()
  AMap.plugin(['AMap.PlaceSearch'], function() {
    var placeSearch = new AMap.PlaceSearch({
      map: map,
      ...otherProps
    })
    placeSearch.searchNearBy(keyword || '', center, radius || 1000, callback)
  })
}

/**
 * @param {*} map 地图实例
 * @param {Function} callback 回调函数
 * @param {Object} otherProps 其他属性
 * @param {String} keyword 关键字
 * @author 曾 2021-07-09 289515197@qq.com
 */
export const searchByKeyword = (map, callback, otherProps, keyword) => {
  map.clearMap()
  AMap.plugin(['AMap.PlaceSearch'], function() {
    var placeSearch = new AMap.PlaceSearch({
      map: map,
      ...otherProps,
    })
    placeSearch.search(keyword, callback)
  })
}
/**
 * 
 * @param {*} map 地图实例
 * @param {Number} startLngLat  起点经纬度
 * @param {Number} endLngLat 终点经纬度
 * @param {String} city 城市名 默认广州
 * @param {Function} callback 回调函数
 * @param {String} panel 容器id
 * @param {Boolean} isLngLat 是否经纬度查询，如传false 则为名称查询
 * @param {String} startName 起点名称 
 * @param {String} endName 终点名称 
 * @param {Object}  otherProps 构造函数其他参数，详见https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
 */
export const transfer = (map, startLngLat, endLngLat, city, callback, panel, isLngLat = true, startName, endName, otherProps) => {
  AMap.plugin('AMap.Transfer', function() {
    var transOptions = {
      map,
      city: city || '广州市',
      panel: panel || 'panel',
      policy: AMap.TransferPolicy.LEAST_TIME,
      ...otherProps
    };
    var transfer = new AMap.Transfer(transOptions);
    if (isLngLat) {
      transfer.search(startLngLat, endLngLat, function(status, result) {
        callback && callback(status, result, transfer)
      })
    } else {
      transfer.search([{ keyword: startName }, { keyword: endName }], function(status, result) {
        callback && callback(status, result, transfer)
      })
    }
  })
}
/**
 * 
 * @param {*} map 地图实例
 * @param {Number} startLngLat 起点经纬度
 * @param {Number} endLngLat 终点经纬度
 * @param {String} city 城市
 * @param {Function} callback 回调函数
 * @param {String} panel 容器id
 * @param {Number} isLngLat 是否经纬度查询 默认是
 * @param {String} startName 当isLngLat传false时，为起点名称
 * @param {String} endName 当isLngLat传false时，为终点名称
 * @param {Object} otherProps 其他属性
 */
export const walking = (map, startLngLat, endLngLat, city, callback, panel, isLngLat = true, startName, endName, otherProps) => {
  AMap.plugin('AMap.Walking', function() {
    var transOptions = {
      map,
      city: city || '广州市',
      panel: panel || 'panel',
      ...otherProps
    };
    var warking = new AMap.Walking(transOptions);
    if (isLngLat) {
      warking.search(startLngLat, endLngLat, function(status, result) {
        callback && callback(status, result, warking)
      })
    } else {
      warking.search([{ keyword: startName }, { keyword: endName }], function(status, result) {
        callback && callback(status, result, warking)
      })
    }
  })
}
// 清除线路图
/**
 * 
 * @param {*} lineStrory AMap.Walking/transfer 创建的实例对象
 */
export const clearLine = (lineStrory) => {
  lineStrory.clear()
}
// 经纬度获取地址
/**
 * 
 * @param {String} LngLat 经纬度
 * @param {Function} callback 回调函数
 * @param {Object} otherProps 其他参数
 */
export const getAddressByLngLat = (LngLat, callback, otherProps) => {
  AMap.plugin('AMap.Geocoder', function() {
    var geocoder = new AMap.Geocoder({
      ...otherProps
    })

    geocoder.getAddress(LngLat, function(status, result) {
      callback(status, result)
    })
  })
}
const mapJS = {
  init,
  getCurrentPosition,
  addMarker,
  addMarker,
  initScaleTools,
  showInfoWindow,
  searchNearBy,
  searchByKeyword,
  transfer,
  walking,
  clearLine,
  getAddressByLngLat
}
export default mapJS

1.3 map.vue 地图实例页面 其他框架自行修改代码

// 方法引入
import { init, getCurrentPosition, addMarker, initScaleTools, removeMarker, transfer, walking, clearLine, searchByKeyword, searchNearBy, getAddressByLngLat } from "@/utils/map.js"
// 使用示例 
 const props = {
        zoom: 15
      }
 init('container', props).then(AMap => {
        _this.map = AMap
        _this.map.on('click', this.clickHandler); // 地图点击事件 可获取经纬度等信息
        getCurrentPosition(_this.map, (res) => {
          console.log(res);
          _this.addressComponent = res.addressComponent
          _this.center = [res.position.lng, res.position.lat]
          addMarker(_this.map, [{ lng: res.position.lng, lat: res.position.lat, otherProps: { title: '广州' } }], this.markerClick)
        }, (err) => {
          console.log(err, '--err');
        }, {})
      }).catch(err => {
        this.$message.error(err);
  })

另附上两个高德url api在这里插入图片描述

// 关键字搜索
window.open(`https://m.amap.com/search/view/keywords=${keywords}`)
// 出行路径规划
window.open(`https://gaode.com/dir?from[name]=起点&from[lnglat]=${'出发经度'},${'出发维度'}&to[name]=终点&to[lnglat]=${目标经度},${目标维度}&policy=1&type=car`)

今天的文章ar导航高德地图_高德网页版地图分享到此就结束了，感谢您的阅读。