<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<p>搜索:
<input id="txtarea" type="text" size="50" /> <input id="areaSearch"
type="button" value="搜索" style="cursor: pointer" />
</p>
<p> 纬度：<input name="txtlatitude" type="text" id="txtlatitude" style="width:200px;" />
经度：<input name="txtLongitude" type="text" id="txtLongitude" style="width:200px;" />
标注点所在区域：<input name="txtAreaCode" type="text" id="txtAreaCode" style="width:200px;" />
</p>
</div>
<div style="width: 420px; height: 340px; border: 1px solid gray; float: left;" id="container">
</div>
<div style="width: 350px; height: 340px;" id="Div1">
<div>
<div class="sel_container">
<strong id="curCity">北京市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div>
<div class="map_popup" id="cityList" style="display: none;">
<div class="popup_main">
<div class="title">
城市列表</div>
<div class="cityList" id="citylist_container">
</div>
<button id="popup_close">
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <!-- //jquery库 -->
<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">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(117.10, 40.13), 11);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
//搜索
document.getElementById("areaSearch").onclick = function () {
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
var searchTxt = document.getElementById("txtarea").value;
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint(searchTxt, function (point) {
if (point) {
map.centerAndZoom(point, 16);
document.getElementById("txtlatitude").value = point.lat;
document.getElementById("txtLongitude").value = point.lng;
var pointMarker = new BMap.Point(point.lng, point.lat);
geocodeSearch(pointMarker);

map.addOverlay(new BMap.Marker(point));
}
else
alert("搜索不到结果");
}, "全国");
}
map.enableScrollWheelZoom();
// 创建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";
}
};

map.addEventListener("click", function (e) {
document.getElementById("txtlatitude").value = e.point.lat;
document.getElementById("txtLongitude").value = e.point.lng;
map.clearOverlays();
var pointMarker = new BMap.Point(e.point.lng, e.point.lat); // 创建标注的坐标
addMarker(pointMarker);
geocodeSearch(pointMarker);
});

function addMarker(point) {
var myIcon = new BMap.Icon("mk_icon.png", new BMap.Size(21, 25),
{ offset: new BMap.Size(21, 21),
imageOffset: new BMap.Size(0, -21)
});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
}
function geocodeSearch(pt) {
var myGeo = new BMap.Geocoder();
myGeo.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
document.getElementById("txtAreaCode").value = addComp.province + ", " + addComp.city + ", " + addComp.district;
});
}
</script>
</body>
</html>

<!-- http://www.jb51.net/article/45443.htm  -->

javascript使用百度地图api和html5特性获取浏览器位置的更多相关文章

  1. 百度地图api根据用户IP获取用户位置（PHP）

    1.百度地图开放平台找的你的ak ,链接:http://lbsyun.baidu.com/apiconsole/key 2.获取用户ip地址(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获 ...

  2. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

  3. 百度地图API，定位您的当前位置

    1.介绍 利用百度地图的API来定位您的所属位置,这个位置返回的是经纬度,而不是具体的汉字位置.利用经纬度,再显示在百度地图上的位置. 2.代码 <html> <head> & ...

  4. java调用百度地图API依据地理位置中文获取经纬度

    百度地图api提供了非常多地图相关的免费接口,有利于地理位置相关的开发,百度地图api首页:http://developer.baidu.com/map/. 博主使用过依据地理依据地理位置中文获取经纬 ...

  5. android 基于百度地图api开发定位以及获取详细地址

    一:百度地图开发必须要到百度开发平台android开发api下载相应的库,已经申请百度地图开发key. 二:新建项目baidumaplocation.设计main.xml文件这里注意的是MapView ...

  6. 百度地图API的基本用法

    首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥. 申请秘钥的步骤: 1.搜索百度地图: 2.进入后,先登录然后点击申请密钥: 3. 4.申请成功,拥有密钥 有了密钥之后,引入百度 ...

  7. 百度地图API 基本用法

    百度地图 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富.交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持H ...

  8. 百度地图API 简单示例

    百度地图API2.0需要申请AK javascript引用百度地图API 设置地图DIV样式 javascript设置地图DIV 如下图代码: <!DOCTYPE html> <ht ...

  9. 百度地图api基本用法

    首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥. 申请密钥很简单,在百度地图api的首页就有相关链接,填写相关信息百度就会给你一个密钥了. 接下来,就是引入百度地图的api 关键 ...

随机推荐

  1. Hadoop1.x目录结构及Eclipse导入Hadoop源码项目

    这是解压hadoop后,hadoop-1.2.1目录 各目录结构及说明: Eclipse导入Hadoop源码项目: 注意:如果没有ant的包可以去网上下,不是hadoop里面的. 然后如果通过以上还报 ...

  2. Linux命令之乐--cat

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 命令参数: -A, --show-all  ...

  3. Lua中 MinXmlHttpRequest如何发送post方式数据

    local xhr=cc.XMLHttpRequest:new() xhr.responseType=cc.XMLHTTPREQUEST_RESPONSE_JSON xhr:open(“POST”,& ...

  4. Eclipse之相关快捷键

    Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键.    1.[ALT+/]   此快捷键为用户编辑的好帮手,能为用 ...

  5. 【BZOJ1895】Pku3580 supermemo Splay

    [BZOJ1895]Pku3580 supermemo Description 给出一个初始序列fA1;A2;:::Ang,要求你编写程序支持如下操作: 1. ADDxyD:给子序列fAx:::Ayg ...

  6. 使用Mac App Store更新、下载软件时出现未知错误的解决方法

    很多果迷在使用 Mac App Store 更新/下载软件时,可能都曾被”未知错误”困扰过,怎么解决也不行.然而,过一段时间不知道做了什么又自己好了.今天我们提供两个解决这个问题的方法,下次遇到这个问 ...

  7. 160519、Oracle中将查询出的多条记录的某个字段拼接成一个字符串的方法

    with temp as( select 'China' nation ,'Guangzhou' city from dual union all select 'China' nation ,'Sh ...

  8. MySQL按照汉字的拼音排序、按照首字母分类

    项目中有时候需要按照汉字的拼音排序,比如联系人列表.矿物分类等,有的还需要按拼音字母从A到Z分类显示. 如果存储汉字的字段编码使用的是GBK字符集,因为GBK内码编码时本身就采用了拼音排序的方法(常用 ...

  9. python--生成测试数据

    1.方法 import datetime params_dict_data = { "system_id":"systemId001", "order ...

  10. Ubuntu 分区以及各个挂载目录的基本含义

    我磁盘大概还有70多G的空间吧,我全部拿来使用的.真实的双系统哦. 一般来讲,linux系统分区最少要包括/和/swap两个.这样据说会影响性能,没有这样安装过,就无从考证啦.其实就是重装系统的时候, ...