66238人阅读
android开发（45）
转载请注明出处：
& & POI~~~ Point of Interest，翻译过来就是“兴趣点”。我们在使用地图的时候，搜索周边的ktv，饭店，或者宾馆的时候，输入关键字，然后地图展示给我们很多个点，这些点就是我需要的信息。这就是所谓的兴趣点，也就是一个普通的查询，然后结果的反馈罢了。
& & 百度地图SDK提供了三种类型的POI检索：周边检索、区域检索和城市内检索。
& & 还是从API看起。找到com.baidu.mapapi.search.poi程序包：
& & 看到这个包中有一个回调接口，用于接收检索结果；PoiSearch类用于检索请求；PoiResult类表示搜索结果，相比它应该在OnGetPoiSearchResultListener这个接口的某个函数中最为参数~~
最后还有4个xxxOption参数类，分别对应周边检索、城市内检索、区域检索、poi详情检索。
& & PoiSearch ：POI检索接口，是我们应该重点关注的类。
& & 从api中可以看出，此类是一个静态类，构造方法被私有化处理，只能通过newInstance()获得实例。看到它的方法，就发现正好有4个方法对应上面四个检索参数类。
searchInBound()
PoiBoundSearchOption
城市内检索
searchInCity()
PoiCitySearchOption
searchInNearby()
PoiNearbySearchOption
searchPoiDetail()
PoiDetailSearchOption
& & 实际上，详情检索与其他三种类型不算一类，它是在通过其他三种检索类型得到的结果在去查询得到详细的信息。
& & 通过这几个类可以对不同的类型设置检索参数，下面看一下监听接口：
& & 该接口有两个回调函数，一个用于接收返回的poi查询结果，一个用于接收返回的详情查询结果。而结果分别封装在PoiResult和PoiDetailResult这两个类中了。
& & PoiResult:
& & 从这里可以看出，百度对检索结果进行了分页处理。所以在设置参数的时候，需要设置单页容量和页号。
// 实例化PoiSearch对象
poiSearch = PoiSearch.newInstance();
// 设置检索监听器
poiSearch.setOnGetPoiSearchResultListener(poiSearchListener);/**
* POI检索监听器
OnGetPoiSearchResultListener poiSearchListener = new OnGetPoiSearchResultListener() {
public void onGetPoiResult(PoiResult poiResult) {
if (poiResult == null
|| poiResult.error == SearchResult.ERRORNO.RESULT_NOT_FOUND) {// 没有找到检索结果
Toast.makeText(PoiSearchActivity.this, &未找到结果&,
Toast.LENGTH_LONG).show();
if (poiResult.error == SearchResult.ERRORNO.NO_ERROR) {// 检索结果正常返回
bdMap.clear();
MyPoiOverlay poiOverlay = new MyPoiOverlay(bdMap);
poiOverlay.setData(poiResult);// 设置POI数据
bdMap.setOnMarkerClickListener(poiOverlay);
poiOverlay.addToMap();// 将所有的overlay添加到地图上
poiOverlay.zoomToSpan();
totalPage = poiResult.getTotalPageNum();// 获取总分页数
Toast.makeText(
PoiSearchActivity.this,
&总共查到& + poiResult.getTotalPoiNum() + &个兴趣点, 分为&
+ totalPage + &页&, Toast.LENGTH_SHORT).show();
* 城市内搜索
private void citySearch(int page) {
// 设置检索参数
PoiCitySearchOption citySearchOption = new PoiCitySearchOption();
citySearchOption.city(editCityEt.getText().toString());// 城市
citySearchOption.keyword(editSearchKeyEt.getText().toString());// 关键字
citySearchOption.pageCapacity(15);// 默认每页10条
citySearchOption.pageNum(page);// 分页编号
// 发起检索请求
poiSearch.searchInCity(citySearchOption);
* 范围检索
private void boundSearch(int page) {
PoiBoundSearchOption boundSearchOption = new PoiBoundSearchOption();
LatLng southwest = new LatLng(latitude - 0.01, longitude - 0.012);// 西南
LatLng northeast = new LatLng(latitude + 0.01, longitude + 0.012);// 东北
LatLngBounds bounds = new LatLngBounds.Builder().include(southwest)
.include(northeast).build();// 得到一个地理范围对象
boundSearchOption.bound(bounds);// 设置poi检索范围
boundSearchOption.keyword(editSearchKeyEt.getText().toString());// 检索关键字
boundSearchOption.pageNum(page);
poiSearch.searchInBound(boundSearchOption);// 发起poi范围检索请求
* 附近检索
private void nearbySearch(int page) {
PoiNearbySearchOption nearbySearchOption = new PoiNearbySearchOption();
nearbySearchOption.location(new LatLng(latitude, longitude));
nearbySearchOption.keyword(editSearchKeyEt.getText().toString());
nearbySearchOption.radius(1000);// 检索半径，单位是米
nearbySearchOption.pageNum(page);
poiSearch.searchNearby(nearbySearchOption);// 发起附近检索请求
}& & 通过以上代码，就可以完成三种类型的检索，分组的时候只不过是改一下pageNum()参数。
& & 查询出这一组组的结果之后，可以通过的方式显示在地图上。但是如果按照之前的添加覆盖物的方式进行添加的话，需要在得到的List&PoiInfo&中得到经纬度数据，然后循环构造出覆盖物对象，添加到地图上。
这样做未尝不可，但是百度提供了更简便的方式给我们。
& & 打开com.baidu.mapapi.overlayutil这个包，看到有一个类用于显示poi的overlay。
& & 从api中得知，该类已经实现了marker点击事件的接口了。我们在接口的毁掉函数onGetPoiResult()中得到了PoiResult对象，然后可以通过setData(PoiResult poiResult)这个方法设置poi数据显示在地图上。
API中说明onPoiClick(int i)可以覆写，这样我们可覆写此方法，当点击底图上覆盖物的时候查询POI详细信息。
class MyPoiOverlay extends PoiOverlay {
public MyPoiOverlay(BaiduMap arg0) {
super(arg0);
public boolean onPoiClick(int arg0) {
super.onPoiClick(arg0);
PoiInfo poiInfo = getPoiResult().getAllPoi().get(arg0);
// 检索poi详细信息
poiSearch.searchPoiDetail(new PoiDetailSearchOption()
.poiUid(poiInfo.uid));
}& & PoiOverlay从OverlayManager这个类中继承了：
1. addToMap() --&将所有overlay添加到地图上
2. removeFromMap() -- 将所有overlay从地图上移除
3. zoomToSpan() -- 缩放地图，使所有overlay都在合适的视野内
这样可以在返回poi结果的时候，把poi标注在地图上了：
if (poiResult.error == SearchResult.ERRORNO.NO_ERROR) {// 检索结果正常返回
bdMap.clear();
MyPoiOverlay poiOverlay = new MyPoiOverlay(bdMap);
poiOverlay.setData(poiResult);// 设置POI数据
bdMap.setOnMarkerClickListener(poiOverlay);
poiOverlay.addToMap();// 将所有的overlay添加到地图上
poiOverlay.zoomToSpan();
totalPage = poiResult.getTotalPageNum();// 获取总分页数
Toast.makeText(
PoiSearchActivity.this,
&总共查到& + poiResult.getTotalPoiNum() + &个兴趣点, 分为&
+ totalPage + &页&, Toast.LENGTH_SHORT).show();
}当我们点击一个覆盖物的时候，去查询详细信息：
public void onGetPoiDetailResult(PoiDetailResult poiDetailResult) {
if (poiDetailResult.error != SearchResult.ERRORNO.NO_ERROR) {
Toast.makeText(PoiSearchActivity.this, &抱歉，未找到结果&,
Toast.LENGTH_SHORT).show();
} else {// 正常返回结果的时候，此处可以获得很多相关信息
Toast.makeText(
PoiSearchActivity.this,
poiDetailResult.getName() + &: &
+ poiDetailResult.getAddress(),
Toast.LENGTH_LONG).show();
& & 短串分享时指：用户查询得到的地理位置对应到一个url链接地址，百度将这种地址做短了，就俗称短串。我们可以把这个短传通过短信、邮箱或者第三方分享给其他用户，当其他用户可以点击短串可以打开手机上的百度地图客户端或者手机浏览器进行查看。
& & 目前短串分享开放了【poi搜索结果分享】和【反向地理编码结果分享】。
& & 打开com.baidu.mapapi.search.share这个包:
& & 我们看到这个包结构与POI的包结构非常相似。按照之前的经验，可以猜想：ShareUrlSearch是用来发起短串检索请求的；2个xxxOption()方法用来对不同的请求类型设置参数的；onGetShareUrlResultListener是用来监听返回结果的；ShareUrlShare就是返回结果的包装类。
// 实例化共享URL查询接口对象
shareUrlSearch = ShareUrlSearch.newInstance();
// 设置共享URL结果监听函数
shareUrlSearch.setOnGetShareUrlResultListener(shareUrlResultListener);
* 短串检索监听器
OnGetShareUrlResultListener shareUrlResultListener = new OnGetShareUrlResultListener() {
public void onGetPoiDetailShareUrlResult(ShareUrlResult shareUrlResult) {
if (shareUrlResult.error != SearchResult.ERRORNO.NO_ERROR) {
Toast.makeText(PoiSearchActivity.this, &抱歉，未搜索到短串&,
Toast.LENGTH_SHORT).show();
Toast.makeText(PoiSearchActivity.this, &poi详情分享url：& + shareUrlResult.getUrl(),
Toast.LENGTH_LONG).show();
public void onGetLocationShareUrlResult(ShareUrlResult shareUrlResult) {
if (shareUrlResult.error != SearchResult.ERRORNO.NO_ERROR) {
Toast.makeText(PoiSearchActivity.this, &抱歉，未搜索到短串&,
Toast.LENGTH_SHORT).show();
Toast.makeText(PoiSearchActivity.this,
&请求位置信息分享url：& + shareUrlResult.getUrl(),
Toast.LENGTH_LONG).show();
};发起请求：
// 请求位置信息分享URL
shareUrlSearch.requestLocationShareUrl(new LocationShareURLOption()
.location(poiInfo.location).name(&共享点名称&).snippet(&123&));
// 共享点位置 --- 共享点名称 --- 通过短URL调起客户端时作为附加信息显示在名称下面
//请求poi详情分享URL的时候参数xxxOption中只有一个uid
shareUrlSearch
.requestPoiDetailShareUrl(new PoiDetailShareURLOption()
.poiUid(poiInfo.uid));
在线建议查询
& & 指根据关键词查询在线建议词。
& & 实现方式与短串分享大同小异。代码就略了吧~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
百度地图开发（一）之初体验： & &
百度地图开发（二）之添加覆盖物+地理编码和反地理编码：
百度地图开发（三）之地图控制+定位：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：856499次
积分：6794
积分：6794
排名：第2807名
原创：113篇
评论：665条
新浪微博：
微信订阅号：
文章：20篇
阅读：83618
阅读：38395
阅读：270792
文章：29篇
阅读：557162
(1)(3)(1)(1)(2)(3)(2)(17)(1)(2)(3)(1)(1)(1)(2)(2)(2)(3)(6)(2)(1)(3)(1)(7)(7)(5)(9)(10)(9)(3)(2)(11)百度地图热力图原理解析_5577我机网
你的位置： →
→ 百度地图热力图原理解析
百度地图热力图原理解析
小伙伴们知不知道手机百度地图热力图怎么看呢，下文将告诉大家手机百度地图热力图查看方法，通过热力图我们能够最直观的看到哪里人流量最多哦~这个在旅游的时候是很实用的哦~，还会告诉大家原理是什么哦。【使用示例】下载百度地图，安装后，打开后点击下图所示图标：将热力图开关开启。之后就能够看到热力图咯~是不是很神奇呢~相关问题解答百度热力图原理是什么？就是利用获取的手机基站定位该区域的用户数量，通过用户数量渲染地图颜色。实现展示该地区人的密度。关键就是数据的获取（坐标信息）百度热力图有什么作用？方便你观察一个地方的人口密集数量，特别是在去旅游的时候，可以找到一些地方的人源多少百度地图全景怎么用？下载完成后，打开百度地图，会在地图右侧的实时路况，图层下面，有一个地标一样的图标，这就是全景模式的打开方式。而全景模式只有在蓝色线路上才有，普通绿色线路上没有，这点要注意。我们选择蓝色道路，点击该图标，如振发六路，稍等片刻，地图会查询该段全景。很快就会展现该段的全景影像，左右触摸以360°全景浏览，是不是很好用。如果查看其他地方，请先搜索要去的地方，然后再点击全景图标即可。百度街景地图怎么用？打开百度手机地图，点击“街景图标”，红色方框内的按钮有街景的路段显示成蓝色的路，拖动地图，点击“信息路”进入街景，可以点箭头前进,点击左下角的按钮，出现俯瞰图，显示你当前的位置，拖动鸟瞰图，可以迅速跳转到其他的街景点百度地图室内怎么用？打开手机百度地图软件，在百度地图中选择侧边栏的第二按钮，点击展开列表就能看到“室内图”的按钮。默认是关闭的，我们需要把这功能打开。打开“室内图”功能后，在地图上就会出现“房子图案”的标志，点击标志我们就能看到商场的室内图了，如果你在商场里面，还可以实现室内定位。至于室内定位是否准确，就等待大家体验了。【总结】以上就是小编给大家提供的关于百度地图的全部的内容了，希望帮助到大家，也希望大家多多支持我机网。
百度地图除了能让我们查位置，还拥有叫车的功能，我们能通过百度
现在的交通很发达，到处都是路标，到处都是人来人往的车辆，特别
破解修改汉化
破解修改汉化
破解修改汉化
破解修改汉化
推荐手机游戏专区百度地图的基本使用情况
时间： 16:53:17
&&&& 阅读：11268
&&&& 评论：
&&&& 收藏：0
$(document).ready(function(){
添加页面头部与尾部
atc_header({index:3});
load_datas();
var current_site = [];
var all_site = [];
var all_maker = [];
var load_datas = function(){
当前所在地名称
var current_prov = ‘‘;
var current_city = ‘‘;
var current_area = ‘‘;
var current_status = ‘‘;
// 百度地图API功能
map = new BMap.Map("mapBox");
// 创建Map实例
//map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(‘北京‘, 12);
map.addControl(new BMap.MapTypeControl());
//添加地图类型控件
map.setCurrentCity("深圳");
// 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);
//开启鼠标滚轮缩放
map.addEventListener("click", function(e){
$(‘.map-station-ls li‘).each(function(li_obj) {
var _self_ =
if ($(_self_).attr(‘val‘) == id) {
$(_self_).find(‘.img_position_class‘).css({‘background-position-y‘: ‘-195px‘});
map.addEventListener("moveend", function(e){
鼠标移动，动态获取当前 城市位置
var point = new BMap.Point(map.getCenter().lng,map.getCenter().lat);//
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
var addComp = rs.addressC
console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
current_prov = addComp.
current_city = addComp.
current_area = addComp.
设置当前城市
$(‘.view-text .text‘).html(current_city.replace(‘市‘,‘‘));
$(‘.current-city‘).html(current_city);
load_site(1,current_prov,current_city,current_area,current_status,addMarker);
$(‘.map-station-ls li‘).each(function(li_obj) {
var _self_ =
if ($(_self_).attr(‘val‘) == id) {
$(_self_).find(‘.img_position_class‘).css({‘background-position-y‘: ‘-195px‘});
搜索框功能
var ac = new BMap.Autocomplete(
//建立一个自动完成的对象
{"input" : "suggestId"
,"location" : map
ac.addEventListener("onconfirm", function(e) {
//鼠标点击下拉列表后的事件
var _value = e.item.
myValue = _value.province +
_value.city +
_value.district +
_value.street +
setPlace();
setTimeout(function(){
获取当前省市区
var point = new BMap.Point(map.getCenter().lng,map.getCenter().lat);//
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
var addComp = rs.addressC
console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
current_prov = addComp.
current_city = addComp.
current_area = addComp.
设置当前城市
$(‘.view-text .text‘).html(current_city.replace(‘市‘,‘‘));
$(‘.current-city‘).html(current_city);
load_site(1,current_prov,current_city,current_area,current_status,addMarker);
设置当前城市
$(‘.view-text .text‘).html(current_city.replace(‘市‘,‘‘));
$(‘.current-city‘).html(current_city);
load_site(1,current_prov,current_city,current_area,current_status,addMarker);
* 搜索目的地
function setPlace(){
map.clearOverlays();
//清除地图上所有覆盖物
function myFun(){
var pp = local.getResults().getPoi(0).
//获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp));
//添加标注
alert("当前定位城市:"+cityName);
var local = new BMap.LocalSearch(map, {
//智能搜索
onSearchComplete: myFun
local.search(myValue);
$(‘.search-txt‘).bind({
‘focus‘:function(){
if($(this).val() == ‘‘){
$(‘.show_searchInfo‘).hide();
‘blur‘ : function(){
if($(this).val() == ‘‘){
$(‘.show_searchInfo‘).show();
‘keydown‘:function(){
var event = event ? event : (window.event ? window.event : null);
if($(this).val() != ‘‘ && event.keyCode == 13){
按回车，则进行关键字检索
myValue = $(this).val();
setPlace();
load_site(1,current_prov,current_city,current_area,current_status,addMarker);
$(‘.search-btn‘).click(function(){
if($(‘.search-txt‘).val() != ‘‘){
myValue = $(‘.search-txt‘).val();
setPlace();
load_site(1,current_prov,current_city,current_area,current_status,addMarker);
搜索框功能
添加后台提供的标注
必须先加载数据，再定位。否则出错
function addMarker(point,status,id,index){
var myIcon = new BMap.Icon("home/image/site_all.png", new BMap.Size(25,35),{
imageOffset: new BMap.Size(-27*index, 0)
// 设置图片偏移
if(status == ‘yes‘){
myIcon = new BMap.Icon("home/image/site_all.png", new BMap.Size(25,35),{
imageOffset: new BMap.Size(-27*index, -33)
// 设置图片偏移
}else if(status == ‘no‘){
myIcon = new BMap.Icon("home/image/site_all.png", new BMap.Size(25,35),{
imageOffset: new BMap.Size(-27*index, 0)
// 设置图片偏移
var marker = new BMap.Marker(point,{icon:myIcon});
map.addOverlay(marker);
标注悬浮/离开事件 start
marker.addEventListener("mouseover",function(){
var _ma_self = this;
悬浮时对应左侧的显示
$(‘.map-station-ls li‘).each(function(li_obj){
var _self_ = this;
if($(_self_).attr(‘val‘) == id){
$(_self_).find(‘.img_position_class‘).css({‘background-position-y‘:‘-226px‘});
$(_self_).find(‘.img_position_class‘).css({‘background-position-y‘:‘-195px‘});
var myIcon1 = new BMap.Icon("home/image/site_all.png", new BMap.Size(32,40),{
imageOffset: new BMap.Size(3-30*index, -71)
// 设置图片偏移
var marker1 = new BMap.Marker(point,{icon:myIcon1});
map.addOverlay(marker1);
all_site.push({
cont : marker1
标注点击事件
marker1.addEventListener("click",function(){
因使用到函数外面的数据，未进行再封装
click_show_window(marker,id);
标注点击事件 stop
marker1.addEventListener("mouseout",function(e){
for(var i = 0; i & all_site. i++){
map.removeOverlay(all_site[i].cont);
$(‘.map-station-ls li‘).each(function(li_obj) {
var _self_ = this;
if ($(_self_).attr(‘val‘) == id) {
$(_self_).find(‘.img_position_class‘).css({‘background-position-y‘: ‘-195px‘});
current_site.push({
cont : point
all_maker.push({
cont : marker
标注悬浮/离开事件 stop
添加后台提供的标注
浏览器定位 OR ip定位 start
if(navigator.geolocation){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
//基于定位的这个点的点位创建marker
map.addOverlay(mk);
将marker作为覆盖物添加到map地图上
map.panTo(r.point);
//将地图中心点移动到定位的这个点位置。注意是r.point而不是r对象。
$(‘.search-txt‘).val(‘您的位置：‘+r.point.lng+‘,‘+r.point.lat);
var geoc = new BMap.Geocoder();
geoc.getLocation(r.point, function(rs){
var addComp = rs.addressC
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
current_prov = addComp.
current_city = addComp.
current_area = addComp.
设置当前城市
$(‘.view-text .text‘).html(current_city.replace(‘市‘,‘‘));
$(‘.current-city‘).html(current_city);
load_site(1,current_prov,current_city,current_area,‘‘,addMarker);
alert(‘failed‘+this.getStatus());
进行IP定位
function myFun(result){
var cityName = result.
map.setCenter(cityName);
current_city = cityN
var point = new BMap.Point(result.center.lng,result.center.lat);//
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
var addComp = rs.addressC
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
current_prov = addComp.
current_city = addComp.
current_area = addComp.
设置当前城市
$(‘.view-text .text‘).html(current_city.replace(‘市‘,‘‘));
$(‘.current-city‘).html(current_city);
load_site(1,current_prov,current_city,current_area,‘‘,addMarker);
var myCity = new BMap.LocalCity();
myCity.get(myFun);
},{enableHighAccuracy: true})
//关于状态码
//BMAP_STATUS_SUCCESS
检索成功。对应数值&0&。
//BMAP_STATUS_CITY_LIST
城市列表。对应数值&1&。
//BMAP_STATUS_UNKNOWN_LOCATION
位置结果未知。对应数值&2&。
//BMAP_STATUS_UNKNOWN_ROUTE
导航结果未知。对应数值&3&。
//BMAP_STATUS_INVALID_KEY
非法密钥。对应数值&4&。
//BMAP_STATUS_INVALID_REQUEST
非法请求。对应数值&5&。
//BMAP_STATUS_PERMISSION_DENIED
没有权限。对应数值&6&。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE
服务不可用。对应数值&7&。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT
超时。对应数值&8&。(自 1.1 新增)
alert("您的浏览器不支持地理定位");
进行IP定位
function myFun(result){
var cityName = result.
map.setCenter(cityName);
current_city = cityN
var point = new BMap.Point(result.center.lng,result.center.lat);//
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
var addComp = rs.addressC
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
current_prov = addComp.
current_city = addComp.
current_area = addComp.
alert("当前定位城市:"+cityName);
设置当前城市
$(‘.view-text .text‘).html(current_city.replace(‘市‘,‘‘));
$(‘.current-city‘).html(current_city);
load_site(1,current_prov,current_city,current_area,‘‘,addMarker);
var myCity = new BMap.LocalCity();
myCity.get(myFun);
浏览器定位 stop
$(‘.mapbtn-fullscreen‘).click(function(){
点击全屏时的效果
if($(‘.atc-mapbox-right‘).hasClass(‘fulll_screen‘)){
$(‘.atc-mapbox-right‘).removeClass(‘fulll_screen‘);
$(‘.mapbtn-fullscreen‘).html(‘全屏‘);
$(‘html‘).css({‘overflow‘:‘auto‘});
$(‘.atc-mapbox-right‘).addClass(‘fulll_screen‘);
$(‘.mapbtn-fullscreen‘).html(‘退出全屏‘);
$(‘html‘).css({‘overflow‘:‘hidden‘});
$(‘.c_right_div‘).mousedown(function(){
点击时，电桩向右侧滑动
var l_0 = null;
l_0 = setInterval(function(){
var _lef = parseInt($(‘.scroll-cont‘).css(‘left‘).replace(‘px‘,‘‘));
if(_lef + $(‘.scroll-cont‘).width() & $(‘.scroll-area‘).width()){
$(‘.scroll-cont‘).css({‘left‘:parseInt(_lef-40)+‘px‘});
if(null != l_0){
window.clearInterval(l_0);
$(‘.c_right_div‘).mouseup(function(){
if(null != l_0){
window.clearInterval(l_0);
$(‘.c_right_div‘).mouseout(function(){
if(null != l_0){
window.clearInterval(l_0);
$(‘.c_left_div‘).mousedown(function(){
点击时，电桩向左侧滑动
var r_0 = null;
r_0 = setInterval(function(){
if(parseInt($(‘.scroll-cont‘).css(‘left‘).replace(‘px‘,‘‘)) & 0){
$(‘.scroll-cont‘).css({‘left‘:parseInt(parseInt($(‘.scroll-cont‘).css(‘left‘).replace(‘px‘,‘‘))+40)+‘px‘});
if(null != r_0){
window.clearInterval(r_0);
$(‘.c_left_div‘).mouseup(function(){
if(null != r_0){
window.clearInterval(r_0);
$(‘.c_left_div‘).mouseout(function(){
if(null != r_0){
window.clearInterval(r_0);
$(‘.div_hidden_close‘).click(function(){
$(‘.map-stations‘).hide();
$(‘.scroll-cont‘).html(‘‘);
城市列表切换效果
changecity(map);
var changecity = function(map){
$(‘#cityBox‘).hover(
function(){$(this).addClass(‘citybox-hover‘)},
function(){$(this).removeClass(‘citybox-hover‘)}
.click(function(){
$(this).addClass(‘citybox-dropdown‘);
return false;
.find(‘.btn-close‘).click(function(){
$(this).parents(‘.citybox‘).removeClass(‘citybox-dropdown‘).removeClass(‘citybox-hover‘);
return false;
$(‘#cityBox‘).find(‘.city-a‘).click(function(){
$(this).parents(‘.citybox‘).find(‘.text‘).text($(this).text());
$(this).parents(‘.citybox‘).find(‘.current-city‘).text($(this).text()+‘市‘);
$(this).parents(‘.citybox‘).find(‘.btn-close‘).click();
并获取城市内的 区域(数据库查询)
map.centerAndZoom($(this).text(),11);
return false;
$(document).click(function(){
$(‘.citybox‘).removeClass(‘citybox-hover‘).removeClass(‘citybox-dropdown‘);
* 查询站点信息及数据
* @param page
当前显示页
* @param current_prov
* @param current_city
* @param current_area
* @param site_stauts
* @param addMarker
var load_site = function(page,current_prov,current_city,current_area,site_stauts,addMarker){
var count_ = 0;
count_ = count_d();
分页的需要先查询所有数据条数再进行分页
load_site_page(page,current_prov,current_city,current_area,site_stauts,addMarker);
load_a_page(count_,page,current_prov,current_city,current_area,site_stauts,addMarker);
* 加载数据总条数
* @returns {number}
var count_d = function(){
var count_ = 0;
加载总共多少条数据
type: ‘post‘,
url: ‘vmdata/list/list.json‘,
data: dataPara,
dataType:‘text‘,
async: false,
success: function(msg){
var obj = eval( ‘(‘ + msg + ‘)‘ );//转换后的JSON对象
count_ = 120;
return count_;
var load_site_page = function(page,current_prov,current_city,current_area,site_stauts,addMarker){
var dataPara = {
s : ‘10‘,
current_prov : current_prov,
current_city : current_city,
current_area : current_area,
site_stauts : site_stauts
type: ‘post‘,
url: ‘vmdata/map/site_list.json‘,
async: false,
dataType:‘text‘,
data: dataPara,
success: function(msg){
var obj = eval( ‘(‘ + msg + ‘)‘ );//转换后的JSON对象
var list = obj.
var t_html_s = ‘&div id="site_all_info"&‘;
t_html_s+= ‘&ul class="map-station-ls clearfix"&‘;
t_html_s+= ‘&/ul&‘;
t_html_s+= ‘&div class="atc-list-page tc pt30 pb20 clearfix"&‘;
t_html_s+= ‘&span class="atc-pages"&‘;
t_html_s+= ‘&a href="#" class="btn-prev"&&&/a&‘;
t_html_s+= ‘&a href="#" class="btn-a cur"&1&/a&‘;
t_html_s+= ‘&a href="#" class="btn-a"&2&/a&‘;
t_html_s+= ‘&a href="#" class="btn-a"&3&/a&‘;
t_html_s+= ‘&a href="#" class="btn-next"&&&/a&‘;
t_html_s+= ‘&/span&‘;
t_html_s+= ‘&/div&‘;
t_html_s+= ‘&/div&‘;
$(‘#site_all_info‘).replaceWith($(t_html_s));
清空站点信息
var _html = ‘‘;
current_site = [];
all_maker = [];
for(var i = 0; i & list. i++){
var point = new BMap.Point(list[i].lng,list[i].lat);
addMarker(point,list[i].status,list[i].id,i);
加载地图上的标注
加载左侧的站点信息
_html+= ‘&li val="‘+list[i].id+‘"&‘;
if(i == 0){
_html+= ‘&div class="title"&&a style="background-position-x:2background-position-y: -195px " class="img_position_class"&&&/a&&&&&&&‘+list[i].site_name+‘&/div&‘;
var x_n = 2 - i*24.1;
_html+= ‘&div class="title"&&a style="background-position-x:‘+x_n+‘background-position-y: -195px " class="img_position_class"&&&/a&&&&&&&‘+list[i].site_name+‘&/div&‘;
_html+= ‘&div class="cont"&‘;
_html+= ‘&div class="addr"&地址：‘+list[i].address+‘&/div&‘;
_html+= ‘&div class="status"&‘;
_html+= ‘充电设备：&span class="mr10"&剩余 &span class="red"&‘+list[i].sur_device+‘&/span& 个&/span&总共 &span class="red"&‘+list[i].all_device+‘&/span& 个‘;
_html+= ‘&/div&‘;
_html+= ‘&/div& ‘;
_html+= ‘&/li&‘;
$(‘.map-station-ls‘).html(_html);
$(‘.map-station-ls li‘).hover(
function(){
$(this).find(‘.img_position_class‘).css({‘background-position-y‘:‘-226px‘});
for(var i = 0; i & current_site. i++){
if(current_site[i].id == $(this).attr(‘val‘)){
var point_t = current_site[i].
var myIcon1 = new BMap.Icon("home/image/site_all.png", new BMap.Size(32,40),{
imageOffset: new BMap.Size(3-30*i, -71)
// 设置图片偏移
var marker1 = new BMap.Marker(point_t,{icon:myIcon1});
map.addOverlay(marker1);
t_marker = marker1;
all_site.push({
id : current_site[i].id,
cont : marker1
function(){
$(this).find(‘.img_position_class‘).css({‘background-position-y‘:‘-195px‘});
for(var i = 0; i & all_site. i++){
map.removeOverlay(all_site[i].cont);
$(‘.map-station-ls li‘).bind(‘click‘,function(){
var t_id = $(this).attr(‘val‘);
for(var j = 0; j & all_maker. j++){
if(all_maker[j].id == t_id){
click_show_window(all_maker[j].cont,t_id);
}, error: function (e) {
console.log(e);
alert(‘fail‘);
scroll_d(‘site_all_info‘);
* 进行分页
* @param count
总数据条数
* @param curr_p
var load_a_page = function(count, curr_p,current_prov,current_city,current_area,site_stauts,addMarker){
加载总共多少页
第二个参数为：当前跳转的页
控制默认样式
if(count & 10){
var show_a_num = 3;
默认显示a标签个数
var curr_page_page = 1;
默认当前显示底部页数的页数
if(curr_p & show_a_num){
curr_page_page = Math.floor(curr_p%show_a_num==0?curr_p/show_a_num:curr_p/show_a_num+1);
var sum_page = Math.floor(count%10==0?count/10:count/10+1);
计算总页数
var sum_page_page = Math.floor(sum_page%show_a_num==0?sum_page/show_a_num:sum_page/show_a_num+1);
a 标签的总页数
var t_html = ‘&span class="atc-pages"&‘;
t_html+= ‘&a class="btn-prev"&&&/a&‘;
t_html+= ‘&span id="a_span"&‘;
for(var i = ((curr_page_page-1)*show_a_num+1); i &= (show_a_num*curr_page_page); i++){
if(i &= sum_page){
if(i == curr_p){
t_html+= ‘&a href="#" class="btn-a cur"&‘+i+‘&/a&‘;
t_html+= ‘&a href="#" class="btn-a"&‘+i+‘&/a&‘;
t_html+= ‘&/span&‘;
t_html+= ‘&a class="btn-next"&&&/a&‘;
t_html+= ‘&/span&‘;
$(‘.atc-list-page‘).html(t_html);
$(‘.atc-list-page‘).show();
$(‘.atc-pages .btn-prev‘).click(function(){
if(curr_page_page & 1){
curr_page_page--;
t_html = ‘‘;
for(var i = ((curr_page_page-1)*show_a_num+1); i &= (show_a_num*curr_page_page); i++){
if(i &= sum_page){
if(i == curr_p){
t_html+= ‘&a href="#" class="btn-a cur"&‘+i+‘&/a&‘;
t_html+= ‘&a href="#" class="btn-a"&‘+i+‘&/a&‘;
$(‘#a_span‘).html(t_html);
$(‘.atc-pages .btn-next‘).click(function(){
if(curr_page_page & sum_page_page){
curr_page_page++;
t_html = ‘‘;
for(var i = ((curr_page_page-1)*show_a_num+1); i &= (show_a_num*curr_page_page); i++){
if(i &= sum_page){
if(i == curr_p){
t_html+= ‘&a href="#" class="btn-a cur"&‘+i+‘&/a&‘;
t_html+= ‘&a href="#" class="btn-a"&‘+i+‘&/a&‘;
$(‘#a_span‘).html(t_html);
$(‘#a_span‘).find(‘a‘).live(‘click‘,function(){
重新加载页面数据
load_site_page($(this).html(),current_prov,current_city,current_area,site_stauts,addMarker);
load_a_page(count_d(),$(this).html(),current_prov,current_city,current_area,site_stauts,addMarker);
var click_show_window = function(marker, id){
var p = marker.getPosition();
//获取marker的位置
alert(‘id=‘+id+‘
marker的位置是‘ + p.lng + ‘,‘ + p.lat);
显示当前标注上的站点基本信息
查询所有的充电电桩
var sContent = ‘站点正在开发中‘;
type: ‘get‘,
url: ‘vmdata/map/map_info.json‘,
data: {id:id},
async : false,
success: function(msg){
var obj = eval( ‘(‘ + msg + ‘)‘ );//转换后的JSON对象
var list = obj.
var det = obj.
setTimeout(function(){
显示当前站点的所有充电桩
原本是进行封装，IE调试下，封装的有报错
参数无效。未解
$(‘.map-stations‘).show();
$(‘.scroll-area‘).width($(‘.map-stations‘).width() -52);
$(‘.scroll-cont‘).width(120*(list.length));
$(‘.scroll-cont‘).html(‘‘);
$(‘.scroll-cont‘).css({‘left‘:‘0px‘});
var t_html = ‘‘;
for(var i = 0; i & list. i++){
t_html+= ‘&div class="scroll-item"&‘;
‘&div class="imgbox"&‘;
‘&img src="about:blank" width="60" height="68" /&‘;
‘&/div&‘;
‘&div class="num"&编号：‘+list[i].code+‘&/div&‘;
‘ &div class="type"&类型：‘+list[i].type+‘&/div&‘;
if(list[i].status != ‘空闲‘){
t_html+= ‘&div class="stat-icon stat-busy"&‘;
t_html+= ‘&span class="text"&‘;
t_html+= ‘‘+list[i].
t_html+= ‘&span class="p"&P&/span&‘;
t_html+= ‘&/span&‘;
t_html+= ‘&/div&‘;
t_html+= ‘&div class="stat-icon stat-idle"&‘;
t_html+= ‘&span class="text"&‘;
t_html+= ‘‘+list[i].
t_html+= ‘&span class="p"&P&/span&‘;
t_html+= ‘&/span&‘;
t_html+= ‘&/div&‘;
t_html+= ‘&/div&‘;
$(‘.scroll-cont‘).html(t_html);
var k_num = 0;
for(var i = 0; i & list. i++){
if(list[i].status == ‘空闲‘){
sContent= ‘&div class="map-infoview map-infoview1 fst"&‘;
sContent+= ‘&h4&‘;
sContent+= ‘‘+det.
sContent+= ‘&/h4&‘;
sContent+= ‘&div class="iv-cont"&‘;
sContent+= ‘&div class="clearfix"&‘;
sContent+= ‘&div class="imgbox"&‘;
sContent+= ‘&img src="‘+det.c_img+‘" width="68" height="42" /&‘;
sContent+= ‘&/div&‘;
sContent+= ‘&div class="aside"&‘;
sContent+= ‘地址：‘+det.
sContent+= ‘&/div&‘;
sContent+= ‘&/div&‘;
sContent+= ‘&div class="func fyh"&‘;
sContent+= ‘&a href="#" class="l atc-btn-b mapbtn-a"&查看平面图&/a&‘;
if(parseInt(k_num) == 0){
sContent+= ‘&a href="manage/cars_regcharge.html?d_id=‘+id+‘" class="r atc-btn-a mapbtn-a"&登记预约&/a&‘;
sContent+= ‘&a href="manage/cars_regcharge.html?d_id=‘+id+‘" class="r atc-btn-a mapbtn-a"&登记预约&/a&‘;
sContent+= ‘&a href="manage/cars_charge.html?d_id=‘+id+‘" class="r atc-btn-a mapbtn-a"&预约充电&/a&‘;
sContent+= ‘&/div&‘;
sContent+= ‘&/div&‘;
sContent+= ‘&div class="status-line"&‘;
sContent+= ‘充电设备：‘;
sContent+= ‘&span class="mr10"&剩余&span class="red"&‘+k_num+‘&/span&个&/span&‘;
sContent+= ‘总共&span class="red"&‘+list.length+‘&/span&个‘;
sContent+= ‘&/div&‘;
sContent+= ‘&/div&‘;
}, error: function () {
sContent = ‘站点正在开发中‘;
var infoWindow = new Window(sContent,{enableMessage:false,width:274});
// 创建信息窗口对象
marker.openInfoWindow(infoWindow);
&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！