http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom
-------------jsp代码
<%-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> --%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title> 数据统计</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<jsp:include page="/component/publicpage/header.jsp"></jsp:include>
<script type="text/javascript" src="<%=basePath %>js/echarts.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XkofHhpAftEZdwus59xA55l80"></script>
<!--ak需要自己注册 -->
<script type="text/javascript" src="<%=basePath %>/js/TextIconOverlay.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/MarkerClusterer.js"></script>
<style type="text/css">
.anchorBL{display:none}
</style>
</head>
<body>
<!-- 查询条件列表 -->
<form id="form2" class="query-list" method="post" action="" data-options="novalidate:true">
<table class="table-query">
<tbody>
<tr>
<th width="5%">房型</th>
<td >
<input id="housecodemap" name="housecodemap" type="text" class="easyui-combobox" value="${housecodemap}" style="width:10%" />
</td>
</tr>
</tbody>
</table>
</form>
<!-- 区域地图 -->
<div id="allmap" style="height:530px; width:99%; margin-left: 10px;margin-right: 10px; margin-top: 10px; margin-bottom:10px; border: 0px solid red;"></div>
<script type="text/javascript">
</script>
</body>
</html>
<script>
$(function(){
$.ajax({
url:'<%=basePath%>selectServlet?codetable=houstTMap',
datatype:"json",
success:function(res)
{
$("#housecodemap").combobox({
editable:false,
valueField:'code',
textField:'name' ,
panelHeight:'auto',
data:JSON.parse(res).result
});
},
error:function(res)
{
alert(res.responseText);
}
});
doQuery();
//下拉框选中事件
$("#housecodemap").combobox({
onChange: function (n,o) {
var data_attr = n;
alert(data_attr);
window.location.href='<%=basePath %>houseinfo/gotoHouseMaptype.xhtml?id='+data_attr;
}
});
});
function doQuery(){
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point('111.31098109196083','30.73275781802591'), 15);
map.enableScrollWheelZoom(true);
map.setMapStyle({style:'normal'});
var markers = [];
var data_info = ${unqualifiedhotmapData};
for (var i = 0; i < data_info.length; i++) {
pt = new BMap.Point(data_info[i].lng, data_info[i].lat);
var marker = new BMap.Marker(pt);
var content = "小区:"+data_info[i].title+"<br/>房价:"+data_info[i].price+"<br/>地址:"+data_info[i].address+"<br/>房型介绍："+data_info[i].remark
addClickHandler(content, marker);
markers.push(marker);
}
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
var opts = {
width : 250, // 信息窗口宽度
height: 150, // 信息窗口高度
title : "房屋信息" , // 信息窗口标题
enableMessage:false //设置允许信息窗发送短息
};
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
}
}
</script>
分享到：
相关推荐
在OpenLayers中调用百度地图是一项常见的需求，特别是在构建Web GIS应用时，用户可能希望结合OpenLayers的强大功能和百度地图的丰富数据。OpenLayers是一个开源JavaScript库，用于创建交互式的地图应用，而百度地图...
而调用百度地图API，可以让我们的应用与百度地图服务进行交互，实现如定位、地图显示、路线规划等功能。本篇文章将深入探讨如何在MFC项目中集成并使用百度地图API。 首先，了解百度地图API的基本概念是至关重要的。...
这个"VB调用百度地图示例"是关于如何在VB程序中集成百度地图API，实现地图显示以及平移至特定坐标的功能。下面将详细介绍这一过程的关键知识点。 首先，理解API（Application Programming Interface）的概念至关...
在ASP.NET中调用百度地图是一项常见的Web开发任务，它涉及到地理位置信息的处理、地图展示以及与用户交互等功能。在本文中，我们将深入探讨如何在ASP.NET应用中集成百度地图API，实现各种实用功能。 首先，我们需要...
PHP实现调用百度地图的功能 一、 开发环境 1、环境搭建：Windows 7+Apache 2.4.18+MySQL 5.7.11+PHP 7.1.0。 2、文本编辑器：Sublime 3。 二、主要技术 本案例主要使用PHP调用百度地图API，从而实现生成自定义百度...
以下是调用百度地图API显示标记点的关键步骤： 1. **注册并获取API密钥**：首先，你需要在百度地图开放平台注册一个账号，并创建一个应用，获取到API密钥（Key）。这个Key是你与百度地图API交互时的身份凭证。 2. ...
然而，有时候为了实现更丰富的功能或者优化性能，我们需要将H5页面与原生应用进行交互，比如调用百度地图API。本文将详细探讨如何在H5框架中调用原生的百度地图插件，以便在网页上集成地图服务。 首先，我们需要...
在VB6（Visual Basic 6）中调用百度地图小程序是一项技术性的工作，涉及到API接口的使用、网络请求以及数据解析等多个方面的知识。这个源代码应该是实现了一个接口，允许VB6程序与百度地图服务进行交互，例如获取...
ASP.NET调用百度地图API实例是一个典型的Web应用开发案例，主要涉及了两个核心技术：ASP.NET框架和百度地图API。这个实例中，开发者利用ASP.NET的网页编程能力结合百度地图的JavaScript API，实现了动态地在网页上...
标题 "DELPHI XE7 调用百度地图 SDK" 涉及到的是在 Delphi XE7 开发环境中使用百度地图的 SDK 来实现地理位置相关的功能。这一技术结合了 Delphi 的编程能力与百度地图服务的强大功能，允许开发者在自己的应用程序中...
在本文中，我们将深入探讨如何使用MFC（Microsoft Foundation Class）中的WebBrowser控件来调用百度地图API，实现地图功能的集成。首先，我们理解MFC是一个C++库，它为Windows应用程序开发提供了一套丰富的类库，...
通过C++代码调用百度地图API，一个简单实用的百度地图操作实例，希望能给大家带来帮助。
在本文中，我们将深入探讨如何在Delphi Android应用程序中调用百度地图的Android SDK，而非使用Web SDK。这个过程涉及到Android编程、API集成以及Delphi的FireMonkey框架。首先，让我们了解一下Delphi和Android SDK...
在delphi 中 调用百度地图，功能比较全面
总之，这个"C#调用百度地图API实例项目源码"是一个很好的学习材料，可以帮助开发者掌握如何在C#环境中集成地图服务，实现各种实用功能。通过实践这个项目，你不仅可以提升C#编程技巧，还能加深对地图API的理解，为...
将百度地图嵌入c# cs窗体中，cs后台控制百度地图： 1）用WebBrower控件加载本地的一个html文件，在html中实现加载百度地图 2）动态添加覆盖物 3）动态添加标签 4）动态添加点击小气球提示 5）经纬度提取详细地址 查...
这个HTML文件应该包含调用百度地图JavaScript API的代码。 **2. 百度地图JavaScript API** 百度地图API提供了丰富的JavaScript库，允许开发者在网页中嵌入地图。首先，你需要在百度地图API官网注册并获取API密钥。...
《LabVIEW调用百度地图——实现地理信息系统与虚拟仪器的完美结合》 在现代科技的快速发展下，地理信息系统（GIS）已经成为数据可视化和空间分析的重要工具。LabVIEW，全称Laboratory Virtual Instrument ...
标题"**C#调用百度地图获取经纬度**"指出了主要的任务：在C#程序中通过调用JavaScript来获取百度地图上的经纬度信息。这通常涉及到以下步骤： 1. **引入百度地图API**：在C#程序中，我们需要加载包含百度地图API的...
本项目专注于使用C#调用百度地图API，实现了一系列在VS2010下的地图操作功能，包括标注、测距、画轨迹以及画圆等。通过这个项目，我们可以学习到以下几个关键知识点： 1. **C#与Web API交互**： - 使用C#的...