当前位置：首页 > news >正文

高德Map

news 2025/8/21 15:45:39

使用

官网：JS API 结合Vue使用

npm i @amap/amap-jsapi-loader --saveimport AMapLoader from '@amap/amap-jsapi-loader';

marker的属性、事件、方法

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

自定义marker

为创建的 Marker 指定自定义图标 URL
创建的 Marker 指定 Icon 实例
为创建的 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 = '<div class="marker-route marker-marker-bus-from"></div>';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('根据经纬度查询地址失败')}});