百度地图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" />
    <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"  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

  

附:百度地图坐标拾取

时间: 2024-10-14 04:02:18

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

百度地图开放接口学习

百度地图 Android SDK是一套基于Android 2.1及以上版本设备的应用程序接口.您可以使用该套 SDK开发适用于Android系统移动设备的地图应用,通过调用地图SDK接口,您可以轻松访问百度地图服务和数据,构建功能丰富.交互性强的地图类应用程序.百度地图Android SDK提供的所有服务是免费的,接口使用无次数限制.您需申请密钥(key)后, 才可使用百度地图Android SDK. 1.       地图 提供地图展示和地图操作功能 ·        地图展示包括:普通地图(

从百度地图API接口批量获取地点的经纬度

今天我同事要做一个规划,需要获取Excel中的2000多个地址的经纬度.问我有没有办法,正好我这段时间学习 Python,想了一下,觉得可以.于是就写了一个以下的代码.刚开始觉得差不多两个小时可以搞定,结果花费了半天多,汗...主要是在卡从百度地图 API获取的是坐标总是不对.后来网上查资料才明白,原来从百度API获取的是墨卡托坐标,而实际使用的是WGS84坐标. 1 #!/usr/bin/python 2 #coding:utf-8 3 4 import xlrd 5 import xlwt

用户Ip地址和百度地图api接口获取用户地理位置(经纬度坐标,城市)

<?php //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){ if(!empty($_SERVER["HTTP_CLIENT_IP"])){ $cip = $_SERVER["HTTP_CLIENT_IP"]; } else if(!empty($_SERVER["HTTP_X_FORWARDED_FOR"])){ $cip = $_SERVER[&quo

tp5 封装百度地图api接口

//服务器端api 原文地址:https://www.cnblogs.com/vip-deng-vip/p/9033915.html

Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

(从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析. 使用的库主要就是有fs.request. // 请求包 var fs = require('fs');var request = require('request'); // 设置百度API的参数var baiduApiKey = "cQV9U4QhamoOjg6rjdOTAQSiUMxxxxx

吐槽贴:百度地图 api 封装 的实用功能 [源码下载]

ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 地图界面: ZMap.js 部分代码说明 /** * 百度地图 api 功能整合 * @author Glo

利用百度地图实现项目中的全球定位

百度地图开放接口 http://developer.baidu.com/map/index.php?title=androidsdk 1) 下载SDK和Demo 2) 创建应用,获得Appkey 数字签名 3) 导入Demo并配置Appkey 4) 参考Demo源代码 3. 使用百度地图实现定位步骤: 1) 从Demo中拷贝库 注意:这两个包中文件要单独导,不能覆盖 2) 拷贝清单中的权限.Appkey和DemoApplication 3) 参考Demo中的LocationDemo.java 4

细读百度地图点聚合源码(上)

之前在项目中需要用到百度地图的点聚合,看了百度提供的demo之后,稍微读了一些源码就能达到需求了,所以并未深入解读源码. 最近有空就把百度实现点聚合的源码从里到外仔细研究了一遍受益良多,在此分享一下. 为了方便研究我把百度demo中点聚合相关的类抽出来,新建了个工程,有需要可以下载来研究.ClusterDemo 整个源码分析过程我分为三个部分: 1.整体结构分析 2.核心算法分析 3.实现点聚合 本篇为上篇,主要分析1,2部分.之后还会有个下篇,着重分析具体如何实现marker点聚合以及一些动画

解决在EasyUI中使用百度地图出现不居中和坐标图标显示异常的问题(红色代码部分)

问题: 1.加载指定经纬度的坐标点怎么都不居中显示,总是显示在左上角,需要在地图加载完后拖动才看到指定的坐标点: 2.显示的坐标点图片没有正常显示,后面使用了自定义坐标图片(如图): 解决后: 参考: 1.百度地图API类:http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB 2.自定义图标这里有:http://blog.csdn.