百度地图JS版本

----选择关键字地图展示对应地址----

CSS

  body, html {
width: %;
height: %;
margin: ;
font-family: "微软雅黑";
font-size: 14px;
}
#l-map {
height: 500px;
width: %;
}
#r-result {
width: %;
}
form.companysel {
width: 1200px;
margin: 20px auto
}
form.companysel span {
font-size: 16px;
color: #;
height: 40px;
line-height: 40px;
display: inline-block;
padding: 10px
}
form.companysel select {
width: 250px;
height: 40px;
line-height: 40px;
color: #;
font-size: 14px;
padding: 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
}
form.companysel input {
width: 530px;
height: 40px;
line-height: 40px;
color: #;
font-size: 14px;
border-radius: 5px;
display: inline-block;
-webkit-border-radius: 5px;
cursor: pointer;
background: #fff;
border: 1px #ccc solid;
padding: 10px
}

JS

<script type="text/javascript">
// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
var map = new BMap.Map("l-map");
map.centerAndZoom("郑州市金水区",); // 初始化地图,设置城市和地图级别。
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[] = "郑州市金水区"; //这里写入每个选项对应的说明文字
company[] = "郑州市二七区";
company[] = "郑州市高新区"; 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=""> 郑州市金水区 </option>
<option value=""> 郑州市二七区 </option>
<option value=""> 郑州市高新区 </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>

百度地图--JS版的更多相关文章

  1. 百度地图js版定位控件

    一 概述 百度地图在最新版已加入浏览器定位控件,个人认为应该是既高德地图更新了一个浏览器也能定位功能后,百度不甘落后自己简简单单,草草写了个这个功能的定位控件 GeolocationControl 这 ...

  2. 外部引入的js 判断js脚本加载是否完成,完成后执行 相应的动作(以引入百度地图js为例)

    可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...

  3. 百度地图js根据经纬度定位和拖动定位点

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  4. 百度地图 IOS版开发经验分享

    最近刚完成app中地图的应用,感觉非常的曲折,折腾了很久,刚才开始一直不能成功使用百度地图api,报一大堆的错误,后来换到高德地图,又发现服务端使用的百度的经纬度,又从高德换回百度,泪奔. 这里简单比 ...

  5. 百度地图JS API不能使用position:fixed

    用于放置百度地图的dom元素及其任何一级父元素设置position:fixed属性时,js会报如下错误: Uncaught TypeError: Cannot read property 'offse ...

  6. 百度地图js lite api 支持点聚合

    百度地图lite api 是专门为h5 绘制海量点设计的,但是偏偏忽略掉了点聚合的需求,所以需要自己动手,做一次二次改造. 我们知道点聚合需要引入开源库: MarkerClusterer:  http ...

  7. 百度地图js小结

    1.获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件. 用法例如以下: <script type="text/javascript" ...

  8. 百度地图 JS API开发Demo01

    百度地图DEMO     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  9. iOS开发---集成百度地图完善版

    一.成为百度的开发者.创建应用 http://developer.baidu.com/map/index.php?title=首页 (鼠标移向 然后选择你的项目需要的功能 你可以在里面了解到你想要使用 ...

随机推荐

  1. 调用链监控 CAT 之 入门

    简介 CAT 是一个实时和接近全量的监控系统,它侧重于对Java应用的监控,基本接入了美团上海所有核心应用.目前在中间件(MVC.RPC.数据库.缓存等)框架中得到广泛应用,为美团各业务线提供系统的性 ...

  2. 小tips:你不知道的 npm init

    前言 在现代新建一个 JS 相关的项目往往都是从 package.json 文件开始的,不过这个文件里需要的字段实在是太多了,正常人都记不住,所以 npm 官方提供了 npm init 命令帮助我们快 ...

  3. 【Linux】【MySQL】CentOS7安装最新版MySQL8.0.13(最新版MySQL从安装到运行)

    1.前言 框框博客在线报时:2018-11-07 19:31:06 当前MySQL最新版本:8.0.13 (听说比5.7快2倍) 官方之前表示:MySQL 8.0 正式版 8.0.11 已发布,MyS ...

  4. Docker-Dockerfile及基本语法

    Dockerfile的作用是通过它可以生成自定镜像,先介绍几个基本的docker命令. [docker镜像相关的命令]docker search 镜像名: 搜索镜像docker pull 镜像名: 镜 ...

  5. SqlServer 操作 JSON

    SqlServer 操作 JSON Intro Sql Server 从 2016 开始支持了一些 json 操作,最近的项目里也是好多地方直接用字段直接存成了 json ,需要了解一下怎么在 Sql ...

  6. 【spring源码分析】IOC容器初始化(七)

    前言:在[spring源码分析]IOC容器初始化(六)中分析了从单例缓存中加载bean对象,由于篇幅原因其核心函数 FactoryBeanRegistrySupport#getObjectFromFa ...

  7. python+selenium运行时,提示元素不可见

    python+selenium运行多次新增项目脚本(出错的元素通过by_id的方式定位),当第三次新增时报Message: element not visible的错误,加入等待时间,等页面加载完成, ...

  8. Codeforces round 1086

    Div1 528 我菜哭了.jpg 这个C的出题人能不能停止出题啊QaQ A 这不是裸的斯坦纳树嘛! 然后我就写上了.jpg 然后我没调出来... 然后我发现...这不是傻逼题吗... 直接按照$x$ ...

  9. Java的基本类型和包装类型

    测试的JDK版本:java version "1.7.0_79".Java的9中基本类型:void.char.boolean.byte.short.int.long.float.d ...

  10. python中使用redis发布订阅者模型

    redis发布订阅者模型: Redis提供了发布订阅功能,可以用于消息的传输,Redis的发布订阅机制包括三个部分,发布者,订阅者和Channel.发布者和订阅者都是Redis客户端,Channel则 ...