`
wangminshe89
  • 浏览: 691039 次
文章分类
社区版块
存档分类
最新评论

使用百度地图进行区域搜索与定位

 
阅读更多

注意：1、需要引入：jquery-1.7.1.min.js

2、要在有网络的情况下才能测试，因为引入了百度中的地图地址

地图的CSS样式：

@charset "utf-8";
/* CSS Document */

.map{width:800px;height:404px;text-align:center;float:left;overflow: hidden;}
.map_left{width:601px;float:left;height:380px;border:2px solid #afafaf;}
.map_right{width:193px;float:right;height:380px;border:1px solid #ccc; }
.map_right_bg{width:193px;background:#e4ecf9;height:20px;}
.map_right_top{width:193px;text-align:center;}
.map_right_top_left{float:left;width:90px;height:30px;}
.map_right_top_right{float:right; text-align:left;height:30px;width:90px;}
.map_right_search{width:193px;}
.map_right_search_left{}
.map_right_search_right{}
.map_right_result{width:193px;text-align:left;}

主界面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>标注餐馆的位置</title>
<link rel="stylesheet" type="text/css" href="mark_map.css"/>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src=" http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js"></script>
<style type="text/css">
.desc{width:100%;hieght:25px;margin:0;padding 0;}
.cityList{height: 320px;width:372px;overflow-y:auto;}
.sel_container{position:absolute;top:0;font-size:12px;}
.map_popup {position: absolute;z-index: 200000;width: 382px;height: 344px;top:20px;}
.map_popup .popup_main { background:#fff;border: 1px solid #8BA4D8;height: 100%;overflow: hidden;position: absolute;width: 100%;z-index: 2;}
.map_popup .title {background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
color: #6688CC;font-size: 12px;font-weight: bold;height: 24px;line-height: 25px;padding-left: 7px;}
.map_popup button {background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
border: 0 none;cursor: pointer;height: 12px;position: absolute;right: 4px;top: 6px;width: 12px;}
</style>
</head>
<body>
<div>
<div id="desc">
<span class="titleClass">标注地理位置</span>(请点击地图右侧的标注按钮，然后在地图上进行标注)
</div>
<div class="map">
<div class="map_left" id="container"></div>
<div class="map_right">
<div class="map_right_bg"></div>
<div class="map_right_top">
<div class="map_right_top_left"><strong id="curCity">北京市</strong></div>
<div class="map_right_top_right">
[<a id="curCityText" href="javascript:void(0)">更换城市</a>]
</div>
<div class="map_popup" id="cityList" style="display:none;text-align: left;">
<div class="popup_main">
<div class="title">城市列表</div>
<div class="cityList" id="citylist_container"></div>
<button id="popup_close"></button>
</div>
</div>

</div>
<div class="map_right_search">
<input type="text" id="search" style="width: 120px;" />
<input type="button" onclick="search()" value="搜索"/>
</div>
<div class="map_right_result" style="height:280px;overflow: auto;">
<div id="results" style="font-size:13px;margin-top:10px;"></div>
</div>
<div style="width:193px;">
<input type="button" value="标注" onclick="mkrTool.open()"/>
<input type="hidden" id="lng" value="<s:property value='#session.res_session.get(\'longitude\')'/>"/>
<input type="hidden" id="lat" value="<s:property value='#session.res_session.get(\'latitude\')'/>"/>
</div>
</div>

</div>
</div>

<script type="text/javascript" >
// 新创建地图
var ox=parseFloat($("#lng").val());
var oy=parseFloat($("#lat").val());
var map = new BMap.Map("container");
var point;
if(ox>0){
point = new BMap.Point(ox, oy);
}else{
point = new BMap.Point(116.404, 39.915);
}

map.centerAndZoom(point, 15);
map.enableScrollWheelZoom();

var mkrTool = new BMapLib.MarkerTool(map, {autoClose: true, followText: "添加标注"});
map.addEventListener("click",function(e){
if(mkrTool._isOpen==true){
var lng=$("#lng").val();
var x=e.point.lng;
var y=e.point.lat;
if(lng.length>0){
if(window.confirm("你已经标注了，确定修改吗？")){
markMap(x,y);
}else{
//alert("你选择了放弃");
mkrTool.close();
}
}else{
markMap(x,y);
}
}

});

function markMap(x,y){
$.post("restaurantAction!resMapMark.do",{posX:x,posY:y},function(data){
if("success"==$.trim(data)){
alert("标注成功");
}else{
alert("标注失败");
}
},'text');
}


// 创建CityList对象，并放在citylist_container节点内
var myCl = new BMapLib.CityList({container : "citylist_container", map : map});

// 给城市点击时，添加相关操作
myCl.addEventListener("cityclick", function(e) {
// 修改当前城市显示
document.getElementById("curCity").innerHTML = e.name;

// 点击后隐藏城市列表
document.getElementById("cityList").style.display = "none";
});

// 给“更换城市”链接添加点击操作
document.getElementById("curCityText").onclick = function() {
var cl = document.getElementById("cityList");
if (cl.style.display == "none") {
cl.style.display = "";
} else {
cl.style.display = "none";
}
};

// 给城市列表上的关闭按钮添加点击操作
document.getElementById("popup_close").onclick = function() {
var cl = document.getElementById("cityList");
if (cl.style.display == "none") {
cl.style.display = "";
} else {
cl.style.display = "none";
}
};


var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "results"},
pageCapacity: 8
});

function search(){
var area=$('#search').val();
local.search(area);
}

</script>

</body>
</html>

分享到：
| 苹果+zb的生日+邮票分你一半（DP01背包）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    百度地图定位，标记摸个区域等

    本文将详细探讨“百度地图定位”这一主题，包括如何显示当前位置、获取经纬度以及如何在地图上标记特定区域。 首先，我们要理解百度地图定位的工作原理。百度地图API提供了一套完整的SDK（Software Development Kit...

    基于百度地图实现的定位功能

    这个Key是你与百度地图API进行交互的身份凭证。 2. **引入SDK**：根据你的开发平台（如Android或iOS），将相应的百度地图SDK导入项目。在Android中，通常通过Gradle依赖管理引入；在iOS中，可能需要手动下载SDK并...

    百度地图自适应定位

    总的来说，"百度地图自适应定位"涉及到地图SDK的集成、定位服务的开启与监听、地图中心点的动态调整等多个环节。虽然初始的实现可能只是基础功能，但通过不断优化，可以实现更高效、更节能、更友好的用户体验。而...

    百度地图定位及周边信息

    以下将详细讲解如何利用百度地图进行定位、查看周边信息以及如何拖拽地图进行交互。 1. **百度地图定位** 百度地图的定位功能基于GPS（全球定位系统）、基站定位、Wi-Fi定位等多种技术融合，确保在各种环境下都能...

    Android开发之百度地图定位打卡

    总的来说，实现“Android开发之百度地图定位打卡”涉及到Android应用开发基础、百度地图API的集成与使用、位置服务的管理和定制化功能的实现等多个方面，需要开发者具备扎实的Android编程技能和良好的问题解决能力。...

    百度地图定位及地图

    3. **开启定位服务**: 使用百度地图SDK提供的接口，如在Android中的`LocationClient`或iOS中的`BMKLocationManager`，开启GPS定位服务，并设置定位参数，如定位模式（高精度、省电模式等）、更新频率等。 4. **监听...

    仿美团外卖商家百度地图

    在IT行业中，构建一个类似美团外卖商家的百度地图应用是一项常见的任务，这涉及到地理信息系统（GIS）技术的应用，特别是百度地图API的使用。本项目旨在实现反向解析地址、自动地图搜索、选择区域跳转以及地图点击与...

    (百度地图)根据名称进行定位

    本篇将详细介绍如何利用百度地图API根据名称进行定位，并探讨相关的技术细节。 首先，要根据名称进行定位，我们需要理解百度地图API的工作原理。它通过集成地理编码（Geocoding）服务，将人类可读的地址（如“北京...

    百度地图的定位与搜索

    【百度地图的定位与搜索】是地图应用中的关键功能，为用户提供实时位置确认以及便捷的地理信息查询。本文将深入探讨这两个核心功能的工作原理、实现方式及其在日常生活和商业活动中的应用。 首先，我们来了解**定位...

    百度地图定位测试程序

    4. **定位权限与隐私保护**：在使用百度地图定位服务时，应用需要获取用户的定位权限。为了保障用户隐私，开发者应遵循相关的数据保护法规，只在必要时请求权限，并明确告知用户其位置数据的使用目的。 5. **地图...

    百度地图定位误差非常小

    3. **地图匹配技术**：在获取了用户的位置坐标后，百度地图会结合其庞大的地图数据库进行地图匹配，确保定位点落在实际道路上，而非空旷区域或障碍物上方。这一过程涉及复杂的算法，包括道路网络分析、动态路线规划...

    百度地图 区间覆盖 多点定位

    这个主题涉及到利用百度地图API实现特定区域内多个点的定位和覆盖，以便进行数据分析、路线规划或者服务覆盖范围展示等。下面将详细解释这一技术及其相关知识点。 首先，**百度地图API**是百度公司提供的一套开放...

    百度地图demo（实现定位与LBS检索）

    本项目是一个使用百度地图SDK实现定位与LBS（Location-Based Services，基于位置的服务）检索的示例，帮助开发者了解如何在iOS平台上进行相关的开发工作。 【描述】：“用百度地图SDK实现LBS检索和定位，系列笔记在...

    仿百度外卖地图拖动定位

    1. **百度地图API**：百度地图API是百度提供的一套用于开发地图应用的接口，它允许开发者在自己的网页或应用程序中嵌入地图，并进行各种定制化操作，如标注、路线规划、定位等。在“拖动定位”功能中，我们需要利用...

    百度地图，定位，路径规划，离线地图，附近搜索

    在IT行业中，百度地图是一个广泛使用的在线地图服务平台，它提供了丰富的功能，如定位、路径规划、离线地图以及附近搜索等。这些功能对于日常生活、出行导航以及商业应用都有着重要的作用。接下来，我们将深入探讨...

    baidu离线地图2.0API示例.zip_baidu地图_百度地图 定位_百度地图定位_百度离线地图_离线

    百度离线地图2.0 API是百度地图为开发者提供的离线地图开发接口，允许开发者在没有网络连接的情况下也能使用地图服务。此API提供了丰富的地图渲染、定位、搜索和路径规划等功能，旨在为开发者创建高效、稳定的离线...

    百度地图定位显示省市区街道名称，非常实用

    然而，室内或高楼林立的区域，GPS信号可能受到遮挡，此时地图服务会结合Wi-Fi、基站等辅助定位信息进行补充，以提高定位准确性。 在百度地图中，这一功能的实现是通过百度地图定位SDK（Software Development Kit）...

    超实用的百度地图开发定位小图标分享

    本文将详细探讨“超实用的百度地图开发定位小图标”的相关知识点，包括百度地图API的使用、定位小图标的定制以及覆盖物的概念。 首先，我们要了解**百度地图API**。这是一个强大的开发工具，允许开发者在网页或移动...

    百度地图定位当前城市

    总结起来，"百度地图定位当前城市"涉及到的技术和知识涵盖了GIS的运用、定位技术的实现、移动应用的开发与优化、地图数据的实时更新和管理、用户隐私保护、以及智能化的交通服务等多个层面。每一个环节都是构建高效...

Magicbox
Global site tag (gtag.js) - Google Analytics