百度地图api 标注小例子

最新推荐文章于 2020-01-05 18:58:27 发布

Leson_Yin

最新推荐文章于 2020-01-05 18:58:27 发布

阅读量165

点赞数

分类专栏： RIA 文章标签：百度地图 api

本文链接：https://blog.csdn.net/ileson/article/details/84625101

版权

RIA 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

web app 开发：[url=http://developer.baidu.com/map/jsdemo.htm]demo[/url]

<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>

Leson_Yin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图api 标注小例子

web app 开发：[url=http://developer.baidu.com/map/jsdemo.htm]demo[/url][code="HTML"]信息搜索经/纬度:显示/** *dom 加载完成后，加载 map。 */ $...
复制链接

扫一扫

专栏目录