最近在开发E都市地图功能,其中用到 了[高德地图]关键字查询
脚本依赖如下:
<script src="lib/jquery.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.0&key=de36f22956d5dfcd77e1f32c33200356&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow,AMap.Autocomplete,AMap.Driving,AMap.Transfer,AMap.Walking,AMap.DragRoute"></script>
// 参数说明:
// key填写你申请的key值
// plugin对应需要的地图插件
// 例如:
// new AMap.Autocomplete
// new AMap.PlaceSearch
html code:
<div id="container" class="map-container"></div>
<div id="mapPanel" class="map-panel"></div>
<div class="button-search">
<input id="keyword" class="inputtext" placeholder="请输入关键字" type="text">
<input id="query" class="button" value="搜索" type="button">
</div>
javascript code:
var map = new AMap.Map("container", {
resizeEnable: true
});
//输入提示
var auto = new AMap.Autocomplete({
input: "keyword"
});
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
map: map,
pageSize: 5,
pageIndex: 1,
panel: "mapPanel",
city: "杭州" //城市
});
//注册监听,当选中某条记录时会触发
AMap.event.addListener(auto, "select", function (ev) {
placeSearch.setCity(ev.poi.adcode);
placeSearch.search(ev.poi.name); //关键字查询
});
window.onload = function() {
map.plugin(["AMap.ToolBar"], function() {
map.addControl(new AMap.ToolBar());
});
if(location.href.indexOf('&guide=1')!==-1){
map.setStatus({scrollWheel:false})
}
var input = $('#keyword');
var query = $('#query');
var text = null;
input.keydown(function (ev) {
if(ev.keyCode===13){
text = $(this).val();
placeSearch.search(text);//关键字查询
}
});
query.on('click',function () {
text = input.val();
placeSearch.search(text);//关键字查询
});
$('body').on('click','.auto-item',function () {
text = $(this).html().substr(0,$(this).html().indexOf('<span'));
placeSearch.search(text);//关键字查询
});
};
css code:
.map-container{
position: absolute;
left: 0;
right: 0;
top:0;
bottom: 0;
z-index: 100;
}
.map-panel {
width: 314px;
max-height: 100%;
overflow-y: auto;;
background-color: white;
position: absolute;
top: 74px;
left: 130px;
z-index: 200;
}
.button-search{
padding: 10px;
font-size: 12px;
position: absolute;
top: 20px;
left: 120px;
z-index: 200;
}
.button-search .inputtext {
width: 300px;
height: 36px;
line-height: 30px;
border: 1px;
outline: none;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
margin-bottom: 4px;
}
.button-search .button {
width: 50px;
height: 36px;
line-height: 30px;
background-color: #0D9BF2;
color: #FFF;
border: 0;
outline: none;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
margin-bottom: 4px;
cursor: pointer;
}