<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Simple Map</title>

        <style type="text/css">

            body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

            p{margin-left:5px; font-size:14px;}

        </style>

        <script type="text/javascript" src="http://api.map.baidu.com/api?ak=申请的Key&v=2.0&services=false"></script>

    </head>

    <body>

        <div id="content" class="content">

        <input type="text" value="" id="keyword" />

        <input type="button" name="" id="" value="查询" onclick="search()" />

        <div style="width:600px;height:500px;border:0px solid gray" id="container"></div>

        <p id="aa"></p>

        <script type="text/javascript">

            //创建Map实例

            var map = new BMap.Map("container");

            var point = new BMap.Point(118.060576,36.842432);

            map.centerAndZoom(point,15);

            //添加鼠标滚动缩放

            map.enableScrollWheelZoom();

            //添加缩略图控件

            map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));

            //添加缩放平移控件

            map.addControl(new BMap.NavigationControl());

            //添加比例尺控件

            map.addControl(new BMap.ScaleControl());

            //添加地图类型控件

            //map.addControl(new BMap.MapTypeControl());

            //设置标注的图标

            var icon = new BMap.Icon("img/icon.jpg",new BMap.Size(100,100));

            //设置标注的经纬度

            var marker = new BMap.Marker(new BMap.Point(118.056156,36.840988),{icon:icon});

            //把标注添加到地图上

            map.addOverlay(marker);

            var content = "<table>";

                content = content + "<tr><td> 编号：001</td></tr>";

                content = content + "<tr><td> 地点：淄博市张店区</td></tr>";

                content = content + "<tr><td> 时间：2014-09-26</td></tr>";

                content += "</table>";

            var infowindow = new BMap.InfoWindow(content);

            marker.addEventListener("click",function(){

                this.openInfoWindow(infowindow);

            });

            //点击地图，获取经纬度坐标

            map.addEventListener("click",function(e){

                document.getElementById("aa").innerHTML = "经度坐标："+e.point.lng+" &nbsp;纬度坐标："+e.point.lat;

            });

            //关键字搜索

            function search(){

                var keyword = document.getElementById("keyword").value;

                var local = new BMap.LocalSearch(map, {

                renderOptions:{map: map}

            });

            local.search(keyword);

            }

        </script>

        </div>

    </body>

</html>

JavaScript API v2.0：http://developer.baidu.com/map/index.php?title=jspopular

百度地图BMap API实例的更多相关文章

  1. 如何结合自己本地数据库，使用【百度地图】API

    如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...

  2. 百度地图的API接口----多地址查询和经纬度

    最近看了百度地图的API的接口,正想自己做点小东西,主要是多地址查询和经纬度坐标跟踪, 下面的代码直接另存为html就可以了,目前测试Chrome和360浏览器可以正常使用. <!DOCTYPE ...

  3. 前端的百度地图的api的使用

    1.打开百度地图官方api网页 http://lbsyun.baidu.com/ 2.点击开发文档 3.选择对应的api 4.点击DEMO详情 5.得到源码复制到你的代码中 <!DOCTYPE ...

  4. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  5. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  6. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  7. vue项目 调用百度地图 BMap is not defined

    这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...

  8. 百度地图代码API

    百度地图代码API: http://api.map.baidu.com/lbsapi/creatmap/index.html

  9. WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现

    原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...

随机推荐

  1. struts2文件下载出现Can not find a java.io.InputStream with the name的错误

    今天在用struts2就行文件下载时出现如下错误: Servlet.service() for servlet default threw exception java.lang.IllegalArg ...

  2. 如何修复在Microsoft Azure中“虚拟机防火墙打开，关闭RDP的连接端口”问题

     注:下列步骤并不一定适用所有场景,提供思路,请灵活应用 我们在使用Microsoft Azure 中Windows 虚拟机,有时会发生错误打开防火墙或一些管家软件错误的关闭了"远程桌面 ...

  3. nginx + memcached-session-manager 实现tomcat下的负载均衡

    1. tomcat6.0 配置 memcached-session-manager 实现session共享 1.1 下载memcached-session-manager-1.6.5.jar.memc ...

  4. linux 给用户添加进新的组

    给用户user1添加一个新的组group1 usermod -G group1 #给当前登录用户所在组设置为 group1 注意:上面的命令有个问题需要知道,这个操作是重置用户所在组,也就是会让当前用 ...

  5. Git起步--git安装与初次运行git前配置

    在你开始使用 Git 前,需要将它安装在你的计算机上. 即便已经安装,最好将它升级到最新的版本. 你可以通过软件包或者其它安装程序来安装,或者下载源码编译安装. 一.Git安装 1. 在linux上安 ...

  6. JavaScript高级程序设计59.pdf

    dropEffect和effectAllowed 利用dataTransfer对象,传输数据.确定被拖动元素以及作为放置目标的元素能够接受什么操作,为此需要访问对象的两个属性dropEffect和ef ...

  7. Python串口操作纸币器1

    公司需要纸币器开发,参考纸币器文档和网上的一篇vb版本,代码如下: # -*- coding:utf-8 -*- # Author: Pete Yim<xpHook@gmail.com> ...

  8. Centos6.4_X64飞信安装

  9. wireshark不仅仅是用来抓包分析网络的;

    凡是不找借口,不排弄推诿理由,提高自我,尽量人事; AIX smit(system manager interface tool); formerly alike; derivatives dpkg ...

  10. Linux常用命令及vim的使用、vim常用插件（推荐）

    看了3篇文章,很好 vim中的区域拷贝 剪切,粘贴: 正常模式,移动光标到剪切的区域开始处,按v,进入可视模式,然后选择区域.按x键,剪切.到指定位置按p粘贴. 撤销按u 恢复按ctrl-r  简明 ...