百度地图JS版本
----选择关键字地图展示对应地址----
CSS
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
font-size: 14px;
}
#l-map {
height: 500px;
width: 100%;
}
#r-result {
width: 100%;
}
form.companysel {
width: 1200px;
margin: 20px auto
}
form.companysel span {
font-size: 16px;
color: #000;
height: 40px;
line-height: 40px;
display: inline-block;
padding: 0 10px
}
form.companysel select {
width: 250px;
height: 40px;
line-height: 40px;
color: #000;
font-size: 14px;
padding: 0 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
}
form.companysel input {
width: 530px;
height: 40px;
line-height: 40px;
color: #000;
font-size: 14px;
border-radius: 5px;
display: inline-block;
-webkit-border-radius: 5px;
cursor: pointer;
background: #fff;
border: 1px #ccc solid;
padding: 0 10px
}
JS
<script type="text/javascript">
// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
var map = new BMap.Map("l-map");
map.centerAndZoom("郑州市金水区",12); // 初始化地图,设置城市和地图级别。
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
var local = new BMap.LocalSearch(map, {
renderOptions: { map: map }
});
var msearch = document.getElementById("suggestId").value;
local.search(msearch); //百度地图关键字检索 默认加载一次
var company = new Array();
company[0] = "郑州市金水区"; //这里写入每个选项对应的说明文字
company[1] = "郑州市二七区";
company[2] = "郑州市高新区";
function companyReveal() {
var companyindex = document.companyForm.companyPick.selectedIndex;//取得当前下拉菜单选定项目的序号
helpmsg = company[companyindex];//根据序号取得当前选项的说明
document.companyForm.companyField.value = helpmsg//将说明写进文框
var msearch = document.getElementById("suggestId").value;
local.search(msearch); //百度地图关键字检索 触发加载
}
</script>
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>选择关键字地图展示对应地址</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的APIkey"></script>
<!-- 你的APIkey 要替换为自己的APIkey 获取方式请到 百度地图开放平台 -->
</head>
<body>
<form name="companyForm" class="companysel">
<span>选择位置：</span>
<select name="companyPick" OnChange="companyReveal()">
<option value="0"> 郑州市金水区 </option>
<option value="1"> 郑州市二七区 </option>
<option value="2"> 郑州市高新区 </option>
</select>
<span>地址：</span>
<input name="companyField" type="text" id="suggestId" value="郑州市金水区" style="overflow:auto" disabled>
</form>
<div id="l-map" style="width: 100%; height: 400px"></div>
</body>
</html>
