首页 > 代码库 > 根据名称在地图上定位
根据名称在地图上定位
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>关键字查询-使用默认皮肤</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0"/>
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.3&key=94544b62a98d26410c6ea4e014dba2b8"></script>
<style type="text/css">
#panel {
position: absolute;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
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,#container{
height: 100%;
margin: 0px;
font: 12px Helvetica, ‘Hiragino Sans GB‘, ‘Microsoft Yahei‘, ‘微软雅黑‘, Arial;
}
.info-title{
color: white;
font-size: 14px;
background-color: rgba(0,155,255,0.8);
line-height: 26px;
padding: 0px 0 0 6px;
font-weight: lighter;
letter-spacing: 1px
}
.info-content{
padding: 4px;
color: #666666;
line-height: 23px;
}
.info-content img{
float: left;
margin: 3px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="tip">
<input type="text" id="keyword" name="keyword" value="http://www.mamicode.com/请输入关键字：(选定后搜索)" onfocus=‘this.value=""‘/>
</div>
<div id="panel">
</div>
<script src="http://www.mamicode.com/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
var urlinfo = window.location.href;//获取url
var userName = urlinfo.split("?")[1].split("=")[1];//拆分url得到”=”后面的参数
//alert(decodeURI(userName));
var address=decodeURI(userName);
//alert(address)
var windowsArr = [];
var marker = [];
var map = new AMap.Map("mapContainer", {
resizeEnable: true
});
AMap.service(["AMap.PlaceSearch"], function() {
var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize: 1,
pageIndex: 1,
city: "021", //城市
map: map//,
//panel: "panel"
});
//关键字查询
placeSearch.search(address, function(status, result) {
});
});
AMap.plugin([‘AMap.Autocomplete‘,‘AMap.PlaceSearch‘],function(){
var autoOptions = {
//city: "北京", //城市，默认全国
input: "keyword"//使用联想输入的input的id
};
autocomplete= new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
city:‘上海‘,
map:map
})
AMap.event.addListener(autocomplete, "select", function(e){
//TODO 针对选中的poi实现自己的功能
placeSearch.search(e.poi.name)
});
});
var marker = new AMap.Marker({
position: [121.494039,31.222484]
});
marker.setMap(map);
marker.on(‘click‘,function(e){
infowindow.open(map,e.target.getPosition());
})
AMap.plugin(‘AMap.AdvancedInfoWindow‘,function(){
infowindow = new AMap.AdvancedInfoWindow({
content: ‘<div class="info-title">‘+address+‘</div><div class="info-content">‘+
‘<img src="http://webapi.amap.com/images/amap.jpg">‘+
‘高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br/>‘+
‘<a target="_blank" href = "http://mobile.amap.com/">点击下载高德地图</a></div>‘,
offset: new AMap.Pixel(0, -30)
});
infowindow.open(map,[121.494039,31.222484]);
})
</script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>
根据名称在地图上定位