百度地图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" 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接口的更多相关文章
- WebApiClient百度地图服务接口实践
1. 文章目的 随着WebApiClient的不断完善,越来越多开发者选择WebApiClient替换原生的HttpClient,然而在应用到实际项目中多多少少会遇到一些项目结合上的疑问和困难,本文将 ...
- 简单几行代码使用百度地图API接口分页获取信息
首发于: 万能助手扩展开发:使用百度地图API接口分页获取信息_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=426 使用 ...
- Angular 调用百度地图API接口
Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...
- httpclient案例二(调用百度地图的接口)
一,class T package com.http.test; import org.junit.Test; import com.http.BaiduMapProxyService; import ...
- tp5 封装百度地图api接口
//服务器端api extend\Map <?php /** * 百度地图业务封装 */ class Map{ /** * 根据地址来获取经纬度 * @param $address */ pub ...
- vue框架导入百度地图API接口的方法
百度请求API接口:
- 百度地图API接口
js <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("map&quo ...
- 用户Ip地址和百度地图api接口获取用户地理位置(经纬度坐标,城市)
<?php //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){ if(!empty($_SERVE ...
- 使用百度地图api接口获取公交地图路线和车站
需要在页面文件中引用百度的js @*<script type="text/javascript" src="http://api.map.baidu.com/api ...
随机推荐
- ORACLE的order by中文排序
在使用order by排序的时候,出现如下情况: 印象中中文排序应该默认是按照拼音排序的,为何"鑫"会排在"中"的后面呢?猜想order by是不是根据对应 ...
- Ftp连接错误
FTP连接上传 文件报错 windows无法访问此文件夹.请确保输入的文件名是否正确,并且您有权访问此文件.. 解决办法 : IE设置为脱机使用,文件浏览器登录ftp时调用IE浏览器,所以无法连接, ...
- 文成小盆友python-num6 -反射 ,常用模块
本次主要内容: 内容补充 python中的反射 常用模块 一,内容补充: 利用上次说到的递归的方法来实现阶乘. 说明:利用函数递归的方法来实现阶乘如: 1*2*3*4*5*6*7 代码实现如下: de ...
- C程序设计语言练习题1-1
练习1-1 在你自己的系统中运行"hello, world"程序.再有意去掉程序中的部分内容,看看会得到什么出错信息. 代码如下: #include <stdio.h> ...
- mac下 配置tomcat
第一步: 1.打开你的终端:然后输入 pico .bash_profile 回车 第二步: 2. 然后添加你tomcat放入的路径的path 编辑完后,control+x (保存) 继 ...
- python登陆教务管理系统
想试着模拟登陆一些网站,这次先拿学校的教务管理系统练练手,写一下登陆的流程. 1.我们登陆的url:http://222.195.8.201,但我们所填的密码不是提交到这个页面上去,检查一下页面代码 ...
- 设置iOS项目BuildVersion自动增加-备用
一.概念阐述:Build与Version的区别 在iOS中有两种“版本号”,也就是所谓的version号与build号,如下图所示: 我们用最简洁的语言来区分这两个版本号的区别以及用途如下: Vers ...
- 变量数据是怎么进ARM中的RAM中?
这篇文章 是从网上复制过来的.觉得不错,分享给大家.原文地址:http://eetrend.com/forum/100028828 ARM的体系结构有很多很多介绍的地方,从其7种模式到CPSR状态寄存 ...
- 异曲同工的AWK语句,学习
输出每个IP的网络连接数,是作很多事情的第一步: netstat -nat | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n ne ...
- Altium designer快捷键
1. 先设置参数,开启高亮显示,见下图红圈处: (1)选择使能可以高亮:CTRL+鼠标左键点击相应PCB网络即可高亮 (2)选择仅切换键时高亮显示,可以在CTRL+鼠标左键点击相应PCB网络高亮后,移 ...