高德Map

使用

官网：JS API 结合Vue使用

npm i @amap/amap-jsapi-loader --save


import AMapLoader from '@amap/amap-jsapi-loader';

marker的属性、事件、方法

https://lbs.amap.com/api/javascript-api-v2/documentation#marker

自定义marker

1. 为创建的 Marker 指定自定义图标 URL
2. 创建的 Marker 指定 Icon 实例
3. 为创建的 Marker 指定自定义内容

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});

// 创建 AMap.Icon 实例：
const icon = new AMap.Icon({
    size: new AMap.Size(40, 50),    // 图标尺寸
    image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像
    imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
});

// 将 Icon 实例添加到 marker 上:
const marker = new AMap.Marker({
    position: new AMap.LngLat(116.405467, 39.907761),
    offset: new AMap.Pixel(-10, -10),
    icon: icon, // 添加 Icon 实例
    title: '北京',
    zoom: 13
});

map.add(marker);

const content = '
';

const marker = new AMap.Marker({
    content: content,  // 自定义点标记覆盖物内容
    position:  [116.397428, 39.90923], // 基点位置
    offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置
});

map.add(marker);

https://lbs.amap.com/api/javascript-api-v2/guide/amap-marker/custom-marker

信息窗体 InfoWindow

地图模糊搜索

https://lbs.amap.com/demo/javascript-api-v2/example/poi-search/search-after-enter-prompt
官网：

    //输入提示
    var autoOptions = {
        input: "tipinput"
    };

    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
        var auto = new AMap.AutoComplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            map: map
        });  //构造地点查询类
        auto.on("select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
        }
    });

自己写一个：

// 输入提示
let autocomplete = new AMap.AutoComplete({
  input: document.getElementById('tipinput')
})

/***
 * 提示的select事件：
 */
autocomplete.on('select', (e) => {
  console.log('select-e:', e)
  // console.log(e.poi.location) // 获取选中的的地址的经纬度
  // placeSearch.search(e.poi.name)

  /***
   * 选择select下拉，跳转到具体位置：
   * 1.‘北京市’等字段选择的时候，没有经纬度，所以使用了setCity去跳转到某个城市
   * 2.详细地市搜索的时候，是有location信息的，可以直接使用setCenter方法
   */
  if (e.poi.location) {
    this.map.setCenter(e.poi.location)
  } else {
    this.map.setCity(e.poi.name)
  }
})

地理编码(address-> 经纬度)和逆地理编码（经纬度->address）

https://lbs.amap.com/demo/javascript-api-v2/example/geocoder/geocoding
https://lbs.amap.com/demo/javascript-api-v2/example/geocoder/regeocoding

 var geocoder = new AMap.Geocoder({
        city: "010", //城市设为北京，默认：“全国”
        radius: 1000 //范围，默认：500
    });

 geocoder.getAddress(lnglat, function(status, result) {
            if (status === 'complete'&&result.regeocode) {
                var address = result.regeocode.formattedAddress;
                document.getElementById('address').value = address;
            }else{
                log.error('根据经纬度查询地址失败')
            }
        });