百度地图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. VSCode中快捷输入HTML代码

    VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这记录一些. 1.输入html:5,然后按tab键或enter键,效果如下: <!-- 输入html或者html:5生成页面模板 ...

  2. Nano Server速记

    入门参考https://docs.microsoft.com/zh-cn/windows-server/get-started/nano-server-quick-start 1.创建VHD Impo ...

  3. 44.Odoo产品分析 (五) – 定制板块(1) – 管理odoo安装(1)

    查看Odoo产品分析系列--目录 1 管理员的注意事项 在记录重要的配置细节时必须要小心,而且必须要有一个连续性的合适的.让系统能够安装备份并运行在一个可接受的时间内的计划. 1.1 制定实施策略 如 ...

  4. DVWA 黑客攻防演练（十）反射型 XSS 攻击 Reflected Cross Site Scripting

    XSS (Cross-site scripting) 攻击,为和 CSS 有所区分,所以叫 XSS.又是一种防不胜防的攻击,应该算是一种 "HTML注入攻击",原本开发者想的是显示 ...

  5. 深入理解Git的实现原理

      0.导读   本文适合对git有过接触,但知其然不知其所以然的小伙伴,也适合想要学习git的初学者,通过这篇文章,能让大家对git有豁然开朗的感觉.在写作过程中,我力求通俗易懂,深入浅出,不堆砌概 ...

  6. 基于android的天气预报的设计与实现

    目录 应用开发技术及开发平台介绍 应用需求分析 应用功能设计及其描述 应用UI展示 ①开发技术: 本系统是采用面向对象的软件开发方法,基于Android studio开发平台,以Android作为本系 ...

  7. eclipse java formater 配置详解

    comment.insert_new_line_before_root_tags(insert/do_not_insert):在Javadoc根标记块前插入空行,默认为insert: insert_s ...

  8. storm ui 网页一直出现提示loading summary

    在更换了一次storm的版本之后:访问 http://mini1:8080/index.html 来查看storm的运行情况,但是出现了网页一直出现提示loading summary,但是通过透明的弹 ...

  9. windows下mysql 5.7以上版本安装及遇到的问题

    (原) 早些前用window安装mysql挺简单的,一个安装程序,一路下一步. 2006的5.0版本,确实太早了点. 于是官网上又下了一个版本,windows也是提供了二个版本Installer(安装 ...

  10. Windows下切分文件（GnuWin32）

    windows下碰到查看大日志文件还真麻烦,今天找了个工具来做这个:安装GnuWin32,然后用里面的split命令分割日志文件 ps:发现intellij idea还挺好,超过2g的日志文件也能进行 ...