<!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. Objective-C基础之──多态

    Objective-C语言是面向对象的高级编程语言,因此,它具有面向对象编程所具有的一些特性,即:封装性.继承性和多态性. 今天介绍一下Objective-C中的多态性. 一.什么是多态 多态:不同对 ...

  2. PL/SQL Developer主界面窗口左边窗口默认设置

    中文版:在菜单 工具 -> 首选项 -> 用户界面 -> 选项 窗口中,将“自动保存桌面”勾选上就可以了. 截图如下: 英文版:在菜单 Tools -> Preferences ...

  3. php测试题整理(0519)

    1.B/S架构和C/S架构: B/S架构是依托于浏览器的网络系统,C/S架构是基于客户端的. B/S架构: 随着Internet和WWW的流行,以往的主机/终端和C/S都无法满足当前的全球网络开放.互 ...

  4. Flask学习记录之Flask-Admin

    相信用过Django框架的都不会忘记它强大的Admin功能,Flask-admin是一款能够与Django Admin所媲美的扩展,能够快速创建Web管理界面,实现了用户.文件增删改查等常用功能:也可 ...

  5. Python正则匹配递归获得给出目录下的特定类型的文件小技巧

    需求是酱的: 输入一个目录,这个目录包含检测目录的必备信息但不准确需要获得后加工一下,如给出目录:C:\Program Files\Common Files\DESIGNER,需要检测的目录是:C:\ ...

  6. cf D. Levko and Array

    http://codeforces.com/contest/361/problem/D 用二分搜索相邻两个数的差的绝对值,然后用dp记录数改变的次数.dp[i]表示在i之前改变的次数,如果|a[i]- ...

  7. qt实现头像上传功能（写了4个类，朝十晚八的博客，非常好）

    想必大家都使用过qt的自定义头像功能吧,那么图1应该不会陌生,本片文章我就是要模拟一个这样的功能,虽然没有这么强大的效果,但是能够满足一定的需求. 图1 qq上传图片 首先在讲解功能之前,我先给出一片 ...

  8. C++11 in Qt5

    本文转载自:http://woboq.com/blog/cpp11-in-qt5.html   C++11 in Qt5 Posted by Olivier Goffart on 11 June 20 ...

  9. Qt在Windows下的三种编程环境搭建

    尊重作者,支持原创,如需转载,请附上原地址:http://blog.csdn.net/libaineu2004/article/details/17363165 从QT官网可以得知其支持的平台.编译器 ...

  10. leetcode_question_119 Pascal's Triangle II

    Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3, Return [1,3 ...