百度地图拖拽设置自定义坐标demo3个（后台添加、修改，前台显示）

最新推荐文章于 2023-09-11 16:02:47 发布
最新推荐文章于 2023-09-11 16:02:47 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： javascript 文章标签： 百度地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangzi1113/article/details/8864566
版权

使用百度地图增加自定义位置，如让会员商家在后台为自己的商铺标注坐标，前台显示，IE6也可以用。

记得把下面例子 http://api.map.baidu.com/api?v=1.5&ak=3E9F0128D0a3fadb4e3c7c8dd111ce1c 中的ak换成自己的key


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:400px;width:400px;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=3E9F0128D0a3fadb4e3c7c8dd111ce1c"></script>
<title>百度地图后台设置自定义坐标</title>
</head>
<body>

<div>
	<div>
		输入城市名：<input type="text" value="南平" id="city">
		<input type="button" value="显示" οnclick="setCity()">
	</div>
	<div id="l-map"></div>
</div>

</body>
</html>
<script type="text/javascript">

//api实例 http://developer.baidu.com/map/jsdemo.htm#a1_2
//文档 http://developer.baidu.com/map/reference/index.php?title=Class:%E6%A0%B8%E5%BF%83%E7%B1%BB/Map

function setCity(){
	
	var city_name = document.getElementById('city').value;
	
	var map = new BMap.Map("l-map");
	map.centerAndZoom(city_name,14);    
	
	setTimeout(function(){
		
			var point = new BMap.Point(map.getCenter().lng,map.getCenter().lat);
			var marker = new BMap.Marker(point);  // 创建标注
			map.addOverlay(marker);              // 将标注添加到地图中
			marker.enableDragging();    //可拖拽
			//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		
		
			var opts = {title : '<strong style="font-size:12px;">定位坐标：</strong>'}
			var infoWindow = new BMap.InfoWindow('<span style="font-size:12px;">拖动小图标定位您的商铺位置<br/>左侧工具条可以放大缩小地图比例</span>', opts);  // 创建信息窗口对象
			marker.openInfoWindow(infoWindow,point); //开启信息窗口
		
		
			marker.addEventListener("mouseover", function(e){          
				//marker.setAnimation(BMAP_ANIMATION_DROP); //停止跳动的动画
			});
			marker.addEventListener("dragend", function(e){          
				var p = marker.getPosition();       //获取marker的位置
				var __p = (p.lng + "," + p.lat)
				
				var gc = new BMap.Geocoder(); 
			    var pt = e.point;
			    gc.getLocation(pt, function(rs){
			        var addComp = rs.addressComponents;
			        var __address = (addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
			        
					var opts = {title : '<strong style="font-size:12px;">当前位置：</strong>'}
					var infoWindow = new BMap.InfoWindow('<span style="font-size:12px;">'+__address+'（坐标：'+__p+'）</span>', opts);  // 创建信息窗口对象
					marker.openInfoWindow(infoWindow,point); //开启信息窗口
			    });    
				
			});
			
		},
	
		1500
	);

	map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
}
</script>








<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:400px;width:400px;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=3E9F0128D0a3fadb4e3c7c8dd111ce1c"></script>
<title>百度地图后台修改自定义坐标</title>
</head>
<body>
	<div>显示坐标119.32979,26.046735</div>
	<div id="l-map"></div>
</body>
</html>
<script type="text/javascript">

//api实例 http://developer.baidu.com/map/jsdemo.htm#a1_2
//文档 http://developer.baidu.com/map/reference/index.php?title=Class:%E6%A0%B8%E5%BF%83%E7%B1%BB/Map

function showPoint(){
	var lng=119.32979, lat=26.046735
	
	var map = new BMap.Map("l-map");
	var point = new BMap.Point(lng,lat);
	map.centerAndZoom(point,18);
	
	
	
	setTimeout(function(){
		
			var point = new BMap.Point(lng,lat);
			var marker = new BMap.Marker(point);  // 创建标注
			map.addOverlay(marker);              // 将标注添加到地图中
			marker.enableDragging();    //可拖拽
			//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		
		
			var opts = {title : '<strong style="font-size:12px;">定位坐标：</strong>'}
			var infoWindow = new BMap.InfoWindow('<span style="font-size:12px;">拖动小图标定位您的商铺位置<br/>左侧工具条可以放大缩小地图比例</span>', opts);  // 创建信息窗口对象
			marker.openInfoWindow(infoWindow,point); //开启信息窗口
		
		
			marker.addEventListener("dragend", function(e){          
				var p = marker.getPosition();       //获取marker的位置
				var __p = (p.lng + "," + p.lat)
				
				var gc = new BMap.Geocoder(); 
			    var pt = e.point;
			    gc.getLocation(pt, function(rs){
			        var addComp = rs.addressComponents;
			        var __address = (addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
			        
					var opts = {title : '<strong style="font-size:12px;">当前位置：</strong>'}
					var infoWindow = new BMap.InfoWindow('<span style="font-size:12px;">'+__address+'（坐标：'+__p+'）</span>', opts);  // 创建信息窗口对象
					marker.openInfoWindow(infoWindow,point); //开启信息窗口
			    });    
				
			});
			
		},
	
		1500
	);

	map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
}

showPoint();
</script>






<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:400px;width:400px;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=3E9F0128D0a3fadb4e3c7c8dd111ce1c"></script>
<title>百度地图前台显示自定义坐标</title>
</head>
<body>
	<div>显示坐标119.32979,26.046735</div>
	<div id="l-map"></div>
</body>
</html>
<script type="text/javascript">

//api实例 http://developer.baidu.com/map/jsdemo.htm#a1_2
//文档 http://developer.baidu.com/map/reference/index.php?title=Class:%E6%A0%B8%E5%BF%83%E7%B1%BB/Map

function showPoint(){
	var lng=119.32979, lat=26.046735
	
	var map = new BMap.Map("l-map");
	var point = new BMap.Point(lng,lat);
	map.centerAndZoom(point,18);
	
	
	
	setTimeout(function(){
		
			var point = new BMap.Point(lng,lat);
			var marker = new BMap.Marker(point);  // 创建标注
			map.addOverlay(marker);              // 将标注添加到地图中
		
		
			var opts = {title : '<strong style="font-size:12px;">本店地址：</strong>'}
			var infoWindow = new BMap.InfoWindow('<span style="font-size:12px;">XX区XX街XX号2楼</span>', opts);  // 创建信息窗口对象
			marker.openInfoWindow(infoWindow,point); //开启信息窗口
			
		},
	
		1500
	);

	map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
}

showPoint();
</script>


xiangzi1113
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android BLE开发 百度地图 大神博客&&简书传送门合集
qswl5500的博客
07-05 454
一、踩坑 踩坑1： 问题Q：方法报错、标红、Android Studio提示必须添加权限检查。 解决S：不用管，一样能够正常运行！ 踩坑2： 问题Q：权限报错、标红、提示必须是系统应用才可以使用。 解决S：不用管，一样能够正常运行！或者修改安全级别，Android Studio: Preferences --> EditorEditor --> Inspections --> A...
java漂浮窗口_GitHub - Alvin3225/EasyFloat: EasyFloat：浮窗从未如此简单（Android可拖拽悬浮窗口，支持页面过滤、自定义动画，可设置单页面浮窗、前台浮窗...
weixin_36310597的博客
03-02 709
EasyFloat：Android悬浮窗框架特点功能：支持单页面浮窗，无需权限申请支持全局浮窗、应用前台浮窗，需要授权悬浮窗权限自动权限检测、自动跳转浮窗权限管理页、自动处理授权结果支持系统浮窗的页面过滤支持拖拽，支持各种状态的回调支持默认位置的设定，支持对齐方式和偏移量的设定支持创建多个单页面浮窗、多个系统浮窗，Tag进行区分支持出入动画的设定，有默认动画，可自行替换(策略模式)使用简单、链式调...
从后台获取位置信息并定位在百度地图上
sning999
01-25 1万+
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{height:500px;width:100%;} 城市名定位 // 百度地图API功能 var map = new BMap.Map("allmap");// 创建Map实例 map.centerAndZoom(ne
百度地图自定义覆盖物demo
08-02
本demo说明http://blog.csdn.net/zxinlong/article/details/9712909 使用的开发环境：eclipse-4.2;jdk-1.7;编码-utf8;sdk-8
百度地图关于离线地图的Demo修改
04-01
关于百度地图的官方Demo基础上修改了离线地图的使用和修改
网站后台管理系统+地图
04-30
网站后台管理系统，功能页面完整，内涵地图、统计图表，且页面设计高档，在项目中参考不少，极有价值
基于百度地图demo修改了一下公交路线的显示
05-19
百度地图的demo,仅修改了RoutePlan类里面的乘车路线， 跳转到其他界面查看详细的信息。 添加的代码都在ces包里面。 其他全部没修改；
一个界面显示多张百度地图---坐标是从后台传入
weixin_30474613的博客
03-31 99
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>//引入百度API <script type="text/javascript"> var lng = "";//经度 var lat = "";//纬度 var name= "map"; ...
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 5665
h5(html5)+css3+移动端前端 知识点详细总结
【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
api_autonavi的专栏
05-27 9751
覆盖物，是一张地图的灵魂。有覆盖物的地图，才是完整的地图。在一张地图上，除了底层的底图（瓦片图，矢量图），控件（有功能可操作的工具），最重要最不可缺少的就是覆盖物了。覆盖物有多种，包括，标注、折线、多边形、信息窗口、聚合marker、麻点图和图片覆盖物。本文会详细介绍每一种覆盖物的概念，添加方法，修改方法，移除方法等。最后会提供示例和源代码下载。   示例demo：http://zha
java 后台框架 支持APP接口调用 APP后台 手机后台框架java springmvc mybaits mysql oracle html5 后台框架
haidao889的博客
02-06 3801
获取【下载地址】    A 调用摄像头拍照，自定义裁剪编辑头像 【新录针对本系统的视频教程，手把手教开发一个模块，快速掌握本系统】 B 集成代码生成器 [正反双向](单表、主表、明细表、树形表，开发利器)+快速构建表单;  技术：313596790 freemaker模版技术 ，0个代码不用写，生成完整的一个模块，带页面、建表sql脚本，处理类，service等完整模块 C
html百度地图拖动,百度地图拖动选点并实时POI检索附近兴趣点
weixin_39788986的博客
06-22 414
地图拖拽选点使用了百度地图的拖拽以及地址解析data{return{goinit:''}}var lng = sessionStorage.getItem('lng')var lat = sessionStorage.getItem('lat')//启用滚轮缩放var map= new BMap.Map("container");var mPoint= new BMap.Point(lng, la...
百度地图从后台获取实时坐标点以实现车辆实时跟踪
热门推荐
sning999
01-31 3万+
要想实现车辆实时跟踪，就必须实时获取车辆的坐标点，然后展示在百度地图上。而实现实时获取车辆坐标点的功能，有两个方案：方案①定义一个函数getCars()，此函数的功能是通过ajax访问后台接口，从而返回车辆的实时位置信息。然后利用setInterval() 方法，每隔2000毫秒（根据业务需求确定）就调用一次获取车辆实时位置信息的函数； 方案②：定义一个获取车辆实时位置信息的函数getCars
百度地图，读取后台值，获取地点坐标
weixin_44944193的博客
12-14 8445
代码如下 html 头部引入链接 <!--头部开始--> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <title>百度插架</title> <script src="scripts/jquery-1.9.1.js" type="...
百度地图的使用---3、信息窗口（InfoWindow）的使用、获取当前位置信息、自定义标题
最新发布
weixin_43905297的博客
09-11 3184
使用百度地图信息窗口、获取当前位置信息、自定义标题
限制百度地图拖动范围限制，当超如范围时自动返回
wo_buzhidao的博客
08-29 1万+
限制百度地图拖动范围限制，当超如范围时自动返回 背景 最近利用百度离线地图加载世界地图，但发现下载的区域只是世界地图一块，当拖动地图范围超过想要的范围时，就会出现背景块为白色； 如图 解决思路1：百度api开发小案例中给出的方案 &lt;script type="text/javascript"&gt; layer.msg('将地图显示范围设定在指定区域，地图拖出该区域后会重...
百度地图api根据后台数据添加多个坐标点
疯人院里的疯子傻子的博客
04-17 5769
百度地图添加多个坐标点 百度地图api添加坐标点，项目中遇到，坐标点根据后台去获取数据，效果如下： 点击坐标点弹框，效果如下： 首先要引用百度地图api的链接还有密码，下面代码，都能实现上述图标的效果，就是把后台获取的数据，字段名字改一下，就可以了 <head> <meta name="viewport" content="initial-scale=1.0,...
android 百度地图批量添加标注,百度地图API实战
weixin_42513616的博客
05-26 911
为地图批量添加标注这一节我们将在地图上标出我们获取的到旅馆位置1、原理我们可以通过for循环的方式为地图批量添加标注2、设置点的新图标我们可以通过Icon(url:String, size:Size[, opts:IconOptions])函数构造出一个Icon对象并且我们能通过setImageSize(offset:Size)改变图标大小，再通过marker的setIcon(icon:Icon)...
百度地图API点击坐标点跳动，上个坐标点停止跳动
PiNossan的博客
04-25 3212
//记录上个坐标 var PreviousPoint = null; function addClickHandler(content, marker) { marker.addEventListener("click", function (e) { //判断上个个坐标是否记录，用于第一次点...
iOS应用：实现百度地图拖拽定位与反编码功能
"本文主要介绍了如何在iOS应用中实现百度地图的拖拽更新位置功能以及反编码技术，通过示例代码展示了具体实现过程。" 在iOS应用开发中，集成百度地图并实现类似微信发送位置的功能是一项常见的需求。该功能允许用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值