高德地图信息载体与搜索结合

最新推荐文章于 2022-11-17 16:28:27 发布

码农之勤奋

最新推荐文章于 2022-11-17 16:28:27 发布

阅读量260

点赞数

分类专栏： API

本文链接：https://blog.csdn.net/qq_38776922/article/details/78960438

版权

API 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>信息载体
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css"/></title>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.2&key=key值"></script>
<style type="text/css">
body {
font-size: 12px;
}
#tip {
background-color: #ddf;
color: #333;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
position: absolute;
top: 10px;
right: 10px;
border-radius: 5px;
overflow: hidden;
line-height: 20px;
}
#tip input[type="text"] {
height: 25px;
border: 0;
padding-left: 5px;
width: 280px;
border-radius: 3px;
outline: none;
}
body,html,#mapContainer{
height: 100%;
margin: 0px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="tip">
<input type="text" id="keyword" name="keyword" value="请输入关键字：(选定后搜索)" οnfοcus='this.value=""'/>
</div>
<div id="container"></div>
</body>
<script>
var placeSearch;
var infoWindow;//信息载体
var info = [];
info.push("<div><div><img style=\"float:left;\" src=\" http://webapi.amap.com/images/autonavi.png \"/></div> ");
info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>高德软件</b>");
info.push("电话 : 010-84107000 邮编 : 100102");
info.push("地址 :北京市朝阳区望京阜荣街10号首开广场4层</div></div>");
var map = new AMap.Map("mapContainer", {//初始化
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 13,//地图显示的缩放级别
keyboardEnable: false
});

AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){//加载插件
var autoOptions = {
city: "", //城市，默认全国
input: "keyword"//使用联想输入的input的id
};
autocomplete= new AMap.Autocomplete(autoOptions);
placeSearch = new AMap.PlaceSearch({
   pageSize: 5,//搜索显示条数五条
pageIndex: 1,
city:'',
map:map
});
AMap.event.addListener(autocomplete, "select", function(e){
placeSearch.search(e.poi.name,function(status, result){
console.info(result);
});
});
AMap.event.addListener(placeSearch, "markerClick", function(e){//标注点击事件
infoWindow = new AMap.InfoWindow({//实例化信息载体
offset: new AMap.Pixel(0, -30),
showShadow: true,
content: info.join("<br/>") //使用默认信息窗体框样式，显示信息内容
});
infoWindow.open(map,e.marker.getPosition());//打开信息载体
});

});

</script>
</html>