百度地图api:http://developer.baidu.com/map/jsdemo.htm

api申请ak:http://lbsyun.baidu.com/

一、搜索地址、定位、点击获取经纬度并标注(一般用于会员后台)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxx"></script>
</head>
<body>
<input name="address" type="text" id="address" class="inp" style="width: 192px" value="陕西省">
<input type="button" value=" 搜索位置 " onclick="codeAddress()" class="ana">
<input name="jingdu" type="text" id="jingdu" value="108.95309828" />
<input name="weidu" type="text" id="weidu" value="34.2777999" /> <br />
<div style="width:1400px;height:800px;border:1px solid gray" id="allmap"></div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
//var map = new BMap.Map("allmap", { mapType: BMAP_SATELLITE_MAP });
var point = new BMap.Point(109.503789, 35.860026);
map.centerAndZoom(point, 14);
map.enableScrollWheelZoom(); //启用滚轮放大缩小
//定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
//mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
mk.enableDragging();
//alert('您的位置:' + r.point.lng + ',' + r.point.lat);
document.getElementById("jingdu").value = r.point.lng;
document.getElementById("weidu").value = r.point.lat;
}
else {
//alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true }) //add city
map.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT
})); //add click
function showInfo(e) {
//alert(e.point.lng + ", " + e.point.lat);
document.getElementById("jingdu").value = e.point.lng;
document.getElementById("weidu").value = e.point.lat;
var mk = new BMap.Marker(e.point);
map.addOverlay(mk);
map.panTo(e.point);
//mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 deletePoint(); //删除所有标注
}
map.addEventListener("click", showInfo); function deletePoint()
{
var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length - 1; i++) {
map.removeOverlay(allOverlay[i]);
}
}
//关于状态码
//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 新增) function codeAddress() {
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(document.getElementById("address").value, function (point) {
if (point) {
map.centerAndZoom(point, 14);
map.addOverlay(new BMap.Marker(point));
document.getElementById("jingdu").value = point.lng;
document.getElementById("weidu").value = point.lat;
} else {
alert("您输入的地址在地图中未找到,请重新输入地址!");
}
}, "");
} </script>
</body>
</html>

二、按经纬度显示地图(前台)

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:700px;height:500px;border:1px solid gray" id="allmap"></div>
<script type="text/javascript">
var map = new BMap.Map("allmap");//2d地图
//var map = new BMap.Map("allmap", { mapType: BMAP_SATELLITE_MAP });//卫星地图
var point = new BMap.Point(119.305724, 26.092186);
map.centerAndZoom(point, 18);
map.addControl(new BMap.NavigationControl());
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
</script>
</body>
</html>

百度地图API-搜索地址、定位、点击获取经纬度并标注的更多相关文章

  1. 百度地图api通过地址显示地图,白名单

    百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...

  2. 【百度地图API】如何判断点击的是地图还是覆盖物?

    原文:[百度地图API]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ...

  3. 如何利用【百度地图API】进行定位?非GPS定位

    原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...

  4. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  5. 百度地图API的IP定位城市和浏览器定位(转)

    百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...

  6. 百度地图API 根据地址查询经纬度

    html页面.引用上API: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ...

  7. 百度地图API 拖拽或点击地图位置获取坐标

    function setPlace(map,myValue,callback){ function getAddress(){ var pp = local.getResults().getPoi(0 ...

  8. php用百度地图API进行IP定位和GPS定位

    <?php /** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apico ...

  9. 百度地图api根据地址获取经纬度

    package com.haiyisoft.cAssistant;import java.io.BufferedReader;import java.io.IOException; import ja ...

随机推荐

  1. 使用Anemometer分析MySQL慢查询记录

    数据库管理员一般是用percona的toolkit工具来分析MySQL慢查询记录,但是不够直观. 下面介绍一款比较直观的工具来统计分析MySQL慢查询记录anemometer. 在使用之前需要安装pe ...

  2. MySQL的keepalived高可用监控脚本

    MySQL的keepalived高可用监控脚本 MySQL(或者其它服务)的keepalived高可用监控脚本 开发脚本需求 :我们知道,keepalive是基于虚拟ip的存活来判断是否抢占maste ...

  3. 对IT技术开发职业生涯的思考

    对职业生涯的思考 从刚毕业到目前所在公司,差不多6年了,想想这六年里面,自己的能力和刚毕业比有了很大的提升,但是现在在什么能力上,我不知道,毕竟没有去过别的公司.最近也在思考自己未来,算是比较迷茫阶段 ...

  4. 【MySQL】MySQL解析用户权限管理

    一.MySQL权限简介 关于mysql的权限简单的理解就是mysql允许你做你全力以内的事情,不可以越界.比如只允许你执行select操作,那么你就不能执行update操作.只允许你从某台机器上连接m ...

  5. Linux 性能监控 : CPU 、Memory 、 IO 、Network

    一.CPU 1.良好状态指标 CPU利用率:User Time <= 70%,System Time <= 35%,User Time + System Time <= 70% 上下 ...

  6. [转]springSecurity源码分析—DelegatingFilterProxy类的作用

    使用过springSecurity的朋友都知道,首先需要在web.xml进行以下配置, <filter>  <filter-name>springSecurityFilterC ...

  7. 关于使用CTE(公用表表达式)的递归查询

    --关于使用CTE(公用表表达式)的递归查询 --CTE 的基本语法结构如下: WITH expression_name [ ( column_name [,...n] ) ] AS ( CTE_qu ...

  8. Python 爬虫 数据清洗 去掉 超链接

    有时候我们需要清洗数据,里面有超链接,怎么去掉他们,比如下面的问题 , - January , </p></li><li </p><div " ...

  9. 安装Flume的时候出现File Channel transaction capacity cannot be greater than the capacity of the channel capacity -解决方案 摘自网络

    部署flume集群时,在启动collector服务器没报错,启动agent服务器报错: File Channel transaction capacity cannot be greater than ...

  10. Android开发之API应用指南

    原文:http://android.eoe.cn/topic/android_sdk 编辑流程 这里主要是和Android技术相关的开发指南,很多都是来源于官方的API Guides( http:// ...