web app 开发：
demo
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="${ctx}/assets/img/logo.png">
<title>信息</title>
</head>
<body>
<input type="text" name="search_map" id="search_map" value="陕西西安" placeholder="西安">
<button type="button" onclick="codeAddress();">搜索</button>
经/纬度:
<input type="text" name="longitude" id="point_lng" placeholder="">
<input type="text" name="latitude" id="point_lat" placeholder="">
<button type="button" onclick="codeByll();">显示</button>
<div style="width:518px;height:300px" id="map"></div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3484f488a1ae1fbadaeeacf21ebd52aa"></script>
<script>
/**
*dom 加载完成后，加载 map。
*/
$(document).ready(function(){
codeAddress();//
})
/**
*根据地址名称，显示标注。百度 map 定位
*/
function codeAddress(){
var addr= $("#search_map").val();
var marker;
// 百度地图API功能
var map = new BMap.Map("map");
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(addr, function(point){
if (point) {
$("#point_lng").val(point.lng);//经度 x轴
$("#point_lat").val(point.lat);//纬度 y轴
// alert(JSON.stringify(point));
map.centerAndZoom(point, 16);
map.enableScrollWheelZoom(true);//让地图支持滚轮缩放。
marker=new BMap.Marker(point);
map.addOverlay(marker);//添加marker
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function(e){
$("#point_lng").val(e.point.lng);//经度 x轴
$("#point_lat").val(e.point.lat);//纬度 y轴
});//给地图添加点击事件。dragend
}
}, addr);
}
/**
*依据 坐标点，显示标注。
*/
function codeByll(){
var lng= $("#point_lng").val();//经度 x轴
var lat= $("#point_lat").val();
// 百度地图API功能
var map = new BMap.Map("map");
var point=new BMap.Point(lng,lat);//创建地图坐标点对象。
map.centerAndZoom(point,16);
map.enableScrollWheelZoom(true);
marker=new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function(e){
$("#point_lng").val(e.point.lng);//经度 x轴
$("#point_lat").val(e.point.lat);//纬度 y轴
});//给地图添加点击事件。dragend，click
}
</script>
</body>
</html>
分享到：
相关推荐
jquery百度地图api标注联系地址名称电话代码
百度地图标注api在地图上选择地址后获取地址和坐标,在marker标注上添加注释在百度地图容器中创建一个地图将地址解析结果显示在地图上,并调整地图视野/启用地图拖拽事件，默认启用(可不写)启用地图滚轮放大缩小启用...
通过C++代码调用百度地图API，一个简单实用的百度地图操作实例，希望能给大家带来帮助。
1.1 百度地图 API 概念 1.2 百度地图的“Hello, World” 1.2.1 引用百度地图API文件 1.2.2创建地图容器元素 1.2.3命名空间 1.2.4创建地图实例 1.2.5创建点坐标 1.2.6 初始化地图 1.2.7地图操作 2应用示例 ...
实现了百度地图自定义标注，标注可以定义自己想要的图片。达到了和百度marker点击后弹出信息窗口的效果，里面有例子，和相应的图片共大家学习。
从数组拿经纬度，在地图上标注点，绘制折线
百度地图api实现部分功能，根据多个坐标连成轨迹、坐标拾取、实现多个标注点并带信息窗口
百度地图JavaScript API初始化地图创建标注
百度地图API通过经纬度显示地理位置，并显示该位置的所有相关信息
C# VS2010下前后台交互调用百度地图API, 实现标注、测距、画轨迹、画圆，等等
百度地图API显示多个标注点，并添加百度样式检索窗口
百度地图API获取单击获取点击的经纬度JS方法，但需要自行去百度官方开放平台去创建一个‘浏览器端’的应用，在html中调用的js后添加上该ak编码
1、获取多个坐标点标注在地图上 2、根据不同状态显示不同的信息窗口样式 3、根据地址检索坐标点（可显示多个） 4、鼠标点击抓取坐标 5、运动轨迹（标记起始位置和终点位置）
百度地图的添加标注工具类，对外开放。 允许用户在地图上点击后添加一个点标注，允许用户设定标注的图标样式。 主入口类是MarkerTool， 基于Baidu Map API 1.2。
根据填写的地址获取经度、纬度，史上最强示例demo。小白容易上手，根据百度地图API编写
查了很多资料也看源码，总结了一下，动态改变标注的位置就类似于路书而且运动速度和轨迹可以随意控制，高速运动的标注也可以触发点击事件，添加多个互不影响其它标注和地图性能，可参考百度地图API 移动的marker，...
原生js 百度地图api坐标地址标注功能源码下载 原生js 百度地图api坐标地址标注功能源码下载
C#VS2010下前后台交互调用百度地图API 实现标注、测距、画轨迹、画圆 项目源代码
百度地图API区域范围楼盘实例,
js百度地图api坐标地址标注功能是一款支持窗口拖拽，改变大小，最小化 最大化 还原 关闭的js特效。