版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/csxypr/article/details/82728936
因为小咸儿最近做一个项目,项目中有一个业务是在写入地址时可以获取到地图中给出的提示,已填写自己的地址。
主要利用的还是高德地图接口,十分的方便,在此特地将代码贴出来:
首先第一点就是要去高德接口的网址上申请一个Key值,这样才可以使用高德地图上的接口。
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址://webapi.amap.com/ui/1.0/ui/misc/PoiPicker/examples/index.html -->
<base href="http://webapi.amap.com/ui/1.0/ui/misc/PoiPicker/examples/" />
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>输入框选择POI点</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
font-size: 13px;
}
#pickerBox {
position: absolute;
z-index: 9999;
top: 50px;
right: 30px;
width: 300px;
}
#pickerInput {
width: 200px;
padding: 5px 5px;
}
#poiInfo {
background: #fff;
}
.amap_lib_placeSearch .poibox.highlight {
background-color: #CAE1FF;
}
.amap_lib_placeSearch .poi-more {
display: none!important;
}
</style>
</head>
<body>
<div id="container" class="map" tabindex="0"></div>
<div id="pickerBox">
<input id="pickerInput" placeholder="输入关键字选取地点" />
<div id="poiInfo"></div>
</div>
<script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.9&key=71ed158dfd75e6a2895742582b3b83b7&plugin=AMap.PlaceSearch'></script>
<!-- UI组件库 1.0 -->
<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 10
});
AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
var poiPicker = new PoiPicker({
//city:'北京',
input: 'pickerInput'
});
//初始化poiPicker
poiPickerReady(poiPicker);
});
function poiPickerReady(poiPicker) {
window.poiPicker = poiPicker;
var marker = new AMap.Marker();
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -20)
});
//选取了某个POI
poiPicker.on('poiPicked', function(poiResult) {
<!-- var source = poiResult.source, -->
poi = poiResult.item,
info = {
<!-- source: source, -->
<!-- id: poi.id, -->
name: poi.name,
<!-- location: poi.location.toString(), -->
<!-- address: poi.address -->
};
marker.setMap(map);
infoWindow.setMap(map);
marker.setPosition(poi.location);
infoWindow.setPosition(poi.location);
infoWindow.setContent('POI信息: <pre>' + JSON.stringify(info, null, 2) + '</pre>');
infoWindow.open(map, marker.getPosition());
map.setCenter(marker.getPosition());
});
poiPicker.onCityReady(function() {
poiPicker.suggest('美食');
});
}
</script>
</body>
</html>
这是一个可以利用的例子,显示图为:
主要参考资料:POI搜索-POI选点
大家可以尝试一下,实践一下去看看这个例子的运行状态,也可以去看网站上的例子。