<!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" />

    <style type="text/css">

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

    #allmap {height: 600px;width:100%;overflow: hidden;}

    #result {width:100%;font-size:12px;}

    dl,dt,dd,ul,li{

        margin:0;

        padding:0;

        list-style:none;

    }

    dt{

        font-size:14px;

        font-family:"微软雅黑";

        font-weight:bold;

        border-bottom:1px dotted #000;

        padding:5px 0 5px 5px;

        margin:5px 0;

    }

    dd{

        padding:5px 0 0 5px;

    }

    li{

        line-height:28px;

    }

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QfT1nxn0agjht4lGTgCfV4zD"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>

    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

    <title></title>

</head>

<body>

    <div id="allmap">

    </div>

</body>

</html>

文内JS代码（博文中不能带script标签）：

// 百度地图API功能

    var map = new BMap.Map('allmap');

    var poi = new BMap.Point(${bean.dictionaryExt.string1});

    map.centerAndZoom(poi, 16);

    map.enableScrollWheelZoom();

    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +

    				'县  市  区：${bean.dictionaryExt.name} <br/>'+

                    //'<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +

                    '地        址：${bean.defaultValue}<br/>'+

                    '服务时间：${bean.dictionaryExt.description} <br/>'+

                    '电        话：${bean.dictionaryExt.string2!?html}' +

                  '</div>';

    //创建检索信息窗口对象

    var searchInfoWindow = null;

	searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {

			title  : "XXXX",      //标题

			width  : 290,             //宽度

			height : 105,              //高度

			panel  : "panel",         //检索结果面板

			enableAutoPan : false,     //自动平移

			searchTypes   :[

				BMAPLIB_TAB_SEARCH,   //周边检索

				BMAPLIB_TAB_TO_HERE,  //到这里去

				BMAPLIB_TAB_FROM_HERE //从这里出发

			]

		});

    var marker = new BMap.Marker(poi); //创建marker对象

    //marker.enableDragging(); //marker可拖拽

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

	    searchInfoWindow.open(marker);

    })

    map.addOverlay(marker); //在地图中添加marker

　　

附：百度地图坐标拾取

百度地图HTML接口的更多相关文章

  1. WebApiClient百度地图服务接口实践

    1. 文章目的 随着WebApiClient的不断完善,越来越多开发者选择WebApiClient替换原生的HttpClient,然而在应用到实际项目中多多少少会遇到一些项目结合上的疑问和困难,本文将 ...

  2. 简单几行代码使用百度地图API接口分页获取信息

    首发于: 万能助手扩展开发:使用百度地图API接口分页获取信息_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=426 使用 ...

  3. Angular 调用百度地图API接口

    Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...

  4. httpclient案例二（调用百度地图的接口）

    一,class T package com.http.test; import org.junit.Test; import com.http.BaiduMapProxyService; import ...

  5. tp5 封装百度地图api接口

    //服务器端api extend\Map <?php /** * 百度地图业务封装 */ class Map{ /** * 根据地址来获取经纬度 * @param $address */ pub ...

  6. vue框架导入百度地图API接口的方法

    百度请求API接口:

  7. 百度地图API接口

    js <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("map&quo ...

  8. 用户Ip地址和百度地图api接口获取用户地理位置（经纬度坐标，城市）

    <?php   //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){     if(!empty($_SERVE ...

  9. 使用百度地图api接口获取公交地图路线和车站

    需要在页面文件中引用百度的js @*<script type="text/javascript" src="http://api.map.baidu.com/api ...

随机推荐

  1. 捷易拍与springMVC系统结合

    1. 捷易拍高拍仪在jsp页面的调用 使用ActiveX插件的方式处理解决此问题,捷易拍公司提供了支持IE8以上的32位浏览器的插件,安装插件后,我们可以使用Object标签,使用高拍仪 注意: 1. ...

  2. Extjs 兼容IE10

    在对应的地方将Ext.isIE 修改成: Ext.isIE && !(/msie 9/.test(navigator.userAgent.toLowerCase())  &&a ...

  3. tbschedule

    tbschedule 此文档内部包括:1.设计目标说明2.主要概念解释3.涉及的数据对象说明4.涉及的业务接口说明5.Sleep模式和NotSleep模式的区别6.使用过程中的注意事项 1.调度器的设 ...

  4. android:showAsAction=＂never＂是做什么用的？

    安卓开发项目文件中有一个目录叫做menu,里面有tybmain.xmlitem选项里有一句 android:showAsAction = "never"那么这句话是做什么用的呢?原 ...

  5. bash模式和模式匹配

    bash模式和模式匹配 ${variable#pattern} 如果模式匹配变量取值的开头,删除最短匹配部分,返回其余部分 ${variable##pattern} 如果模式匹配变量取值的开头,删除最 ...

  6. 国威电话机WS824(5D)-3型调试文档--可以转行啦

    多了一万多搞的机器,花了我和同事们两三个晚上,最近还要打技术支持得到的经验... 可以转行作弱电啦啦~~~) 一,外线分组调试: 默认设置为所有内线端口可用1,2,13,14,15,16打出.(16个 ...

  7. windows bat命令编写大全

    1 echo 和 @ @  #关闭单行回显echo off #从下一行开始关闭回显 @echo off  #从本行开始关闭回显.一般批处理第一行都是这个 echo on  #从下一行开始打开回显 ec ...

  8. eclipse,tomcat部署web项目，以及本地文件访问

    1.直接把项目复制到Tomcat安装目录的webapps目录中,这是最简单的一种Tomcat项目部署的方法,也是初学者最常用的方法. 2.在tomcat安装目录中有一个conf文件夹,打开此文件夹,其 ...

  9. Windows 8.1下使用IE 64位

    Internet Options -> Advanced -> Settings Security组 对Enable 64-bit processes for Enhanced Prote ...

  10. c语言指针与结构体

    #include <stdio.h> #include <stdlib.h> struct mydata { int num; ]; }; void main1() { /*i ...