<!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. 使用DataSet数据集插入记录

    使用INSERT语句能够完成数据插入,使用DataSet对象也可以完成数据插入.为了将数据库的数据填充到DataSet中,则必须先使用DataAdapter对象的方法实现填充,当数据填充完成后,开发人 ...

  2. 自己手动绿色化MyEclipse

    绿化过程因每个人的文件存放路径不同而不同 首先打开你解压的MyEclipse文件,或者以前安装的MyEclipse重装系统后不能用,打开到这里:记住路径,比如我的是:D:\MyEclipse 我们打开 ...

  3. nyoj组合数

    算法:深搜 描述 找出从自然数1.2.... .n(0<n<10)中任取r(0<r<=n)个数的所有组合. 输入输入n.r.输出按特定顺序输出所有组合. 特定顺序:每一个组合中 ...

  4. linux一些常用指令整理

    set number:设置行号 set list:区分tab和空格 按w:一个字一个字跳转 按b:一个字一个字回跳 shift+6:行首 shift+4:行尾 ctrl+v:选中块,再按shift+i ...

  5. django TypeError: 'module' object is not callable

    原因:导入模块时直接把模块当函数使用 from rest_framework import reverse #import reverse module @api_view(("GET&qu ...

  6. sass基础学习

    2015.6.281.安装ruby2.运行gem安装sass-->gem install sass3.编译命令行sass --watch 文件路径/test.scss:编译后文件路径/test. ...

  7. apscheduler的使用

    最近一个程序要用到后台定时任务,看了看python后台任务,一般2个选择,一个是apscheduler,一个celery.apscheduler比较直观简单一点,就选说说这个库吧.网上一搜索,晕死,好 ...

  8. Python中unittest采用不同的参数组合产生独立的test case

    我们在使用Python的unittest做自动化或者单元测试时,有时需要一个测试用例根据不同的输入.输出组合而执行多次,但是,unittest中一个用例只能有一组参数组合执行,如果采用循环的方式,在生 ...

  9. HDFS操作--文件上传/创建/删除/查询文件信息

    1.上传本地文件到HDFS //上传本地文件到HDFS public class CopyFile { public static void main(String[] args) { try { C ...

  10. 【Beta】Phylab2.0: Postmortem

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 主要解决同学们写物理实验报告时,处理数据的困难--巨大的计算量和不规范的物理报告数据处理格式.典型 ...