android 百度地图拖动定位,百度地图获取定位,实现拖动marker定位,返回具体的位置名...

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

.button-full{

position: fixed;

bottom: 0;

left: 0;

z-index: 999;

height: 50px;

width: 100%;

line-height: 50px;

font-size: 16px;

text-align: center;

color: #fff;

background: #333;

text-decoration: none;

}

地图展示

选择这个地址

javascirpt

//创建默认初始化Map实例

(function(){

mapObj = {

com: {

map : new BMap.Map("allmap"),

infoWindow : new BMap.InfoWindow("正在载入..", {offset : new BMap.Size(20, -60)}),

icon: new BMap.Icon("__IMG__/locate.png", new BMap.Size(60, 60)),

iconOffsetSize: new BMap.Size(0, -30),

chosedAddr: ""

},

init: function(){

var _this = this;

_this.default();

_this.initLocation().then(function(result){

//清除掉默认的markerDefault

_this.com.map.clearOverlays()

var marker = result.mk;

var point = result.pt;

//取得当前位置的名字

_this.getAddrAccordingPoint(point).then(function(res){

_this.changeInfoWindowContent(res)

//打开信息窗体

_this.com.map.openInfoWindow(_this.com.infoWindow, point);

});

//绑定拖动结束事件,获取经纬度

marker.addEventListener("dragend", function(){

var curPoint = marker.getPosition();

console.log(curPoint)

//取得拖动后当前位置的名字

_this.getAddrAccordingPoint(curPoint).then(function(res){

_this.changeInfoWindowContent(res)

//打开信息窗体

_this.com.map.openInfoWindow(_this.com.infoWindow, curPoint);

});

});

marker.addEventListener("click", function(){

var curPoint = marker.getPosition();

_this.getAddrAccordingPoint(curPoint).then(function(res){

_this.changeInfoWindowContent(res)

//打开信息窗体

_this.com.map.openInfoWindow(_this.com.infoWindow, curPoint);

})

});

})

},

//默认打开地图的初始状态设置

default: function(){

var _this = this;

var point = new BMap.Point(114.062048, 22.54579);

// 设置初始化地图,设置中心点坐标和地图级别

_this.com.map.centerAndZoom(point, 12);

//设置初次打开时,markerDefault,定位初始完毕会被销毁

var markerDefault = new BMap.Marker(point);

_this.com.map.addOverlay(markerDefault);

markerDefault.setIcon(_this.com.icon);

//设置信息窗体宽度

_this.com.infoWindow.setWidth(220);

},

//獲取定位初始化地圖

initLocation: function (){

var _this = this;

return new Promise(function(resolve, reject){

new BMap.Geolocation().getCurrentPosition(function(r){

var lat = r.latitude;

var long = r.longitude;

var point = new BMap.Point(long, lat)

var marker = new BMap.Marker(point);

marker.setOffset(_this.com.iconOffsetSize)

marker.setIcon(_this.com.icon);

marker.setAnimation(BMAP_ANIMATION_BOUNCE);

var initObj = {

pt: point,

mk: marker

}

// 将标注添加到地图中

_this.com.map.addOverlay(marker);

//允许拖动

marker.enableDragging();

//不允许被clearOverlays方法清除

marker.disableMassClear();

//地图指向当前的点(平移动画)

_this.com.map.panTo(point);

// 初始化地图,设置中心点坐标和地图级别

_this.com.map.centerAndZoom(point, 16);

resolve(initObj);

})

})

},

//根据经纬度解析出位置的名称

getAddrAccordingPoint: function(point){

var _this = this;

return new Promise(function(resolve, reject){

new BMap.Geocoder().getLocation(point, function(result){

if (result){

if(!!result.surroundingPois[0]){

_this.com.chosedAddr = result.address + " " +result.surroundingPois[0].title;

}else{

_this.com.chosedAddr = result.address;

}

resolve(_this.com.chosedAddr)

}

});

})

},

//添加标注地址信息

changeInfoWindowContent: function(content){

var _this = this;

_this.com.infoWindow.setContent(content);

}

};

//开始地图

mapObj.init();

document.getElementById('chosedBtn').addEventListener('click', function(){

location.href = '?address='+mapObj.com.chosedAddr

},false)

})()

C#的百度地图开发(四)前端显示与定位

原文:C#的百度地图开发(四)前端显示与定位 有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API.下面是示例代码. 前端代码

百度地图API 显示区域边界及地名定位

百度地图API 显示区域边界及地名定位 这个定位一共用了两个方法组成 一个是定位绘制区域边界线,另一个是地名定位 原理: 当用户输入省.市.县.区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓 ...

Xamarin.Android 使用百度地图获取定位信息

最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...

ionic基于GPS定位并通过百度地图获取定位详细信息

相信所有的前端攻城狮都会碰到移动端App.里面获取用户定位信息. 那么问题来了,怎么获取用户的定位信息(经纬度)呢. 当然方法有很多,通过百度地图API 以及 高德地图 API都是可以的.但是两个获取 ...

[android] 百度地图开发 (两).所在地的城市定位和城市POI搜索

一个. 百度地图城市位置和POI搜索知识       上一篇文章"百度地图开发(一)"中讲述了怎样申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述怎样定位城市位置.定 ...

Android Studio下加入百度地图的使用(二)——定位服务

上一章(http://www.cnblogs.com/jerehedu/p/4891216.html)中我们已经完成了环境的搭建,这一章我们来研究一下如何使用. 第一步:在xml文件中加入以下权限 & ...

百度地图api之----根据用户ip定位城市

LocalCity 这个类是利用用户IP地址去百度数据库里查询得到IP所在的城市,用法如下: var objCity = new BMap.LocalCity(); objCity.get(funct ...

IOS百度地图获取所在的城市名称

笔者的app要实现定位所在省和城市名称,借此总结巩固一下! @interface VenueListVC : BasePageTableViewVC

vue 中结合百度地图获取当前城市

首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...

随机推荐

UpdateData(TRUE)与UpdateData(FALSE)的使用

二者是更新对话框的控件与变量. 1.先要建立对应关系 如 编辑框IDC_Edit  和 变量 m_name DDX_Text(pDX, IDC_EDIT, m_name); 2.若是在编辑框输入名字 ...

AutoIt3(AU3)开发的装机小工具,实现快速检测以及一些重用快捷操作功能

项目相关地址 源码:https://github.com/easonjim/Installed_Tools bug提交:https://github.com/easonjim/Installed_To ...

iOS开发中常见的问题

1.重复调用2次loadView和viewDidLoad 最好不要在UIViewController的loadView方法中改变状态栏的可视性(比如状态栏由显示变为隐藏.或者由隐藏变为显示),因为 ...

iptable nat网关

echo "1" > /proc/sys/net/ipv4/ip_forward iptables -t nat -A POSTROUTING -s 192.168.1.0/ ...

Android Rom修改

最近项目里要实现修改开机动画 屏蔽系统桌面等一些涉及到修改底层的功能 一开始研究了一番 心想着看来这是要定制系统 做rom开发了 所以就牛逼哄哄的跑去下源码 研究rom开发 后来发现这将是一个庞大的工 ...

前端--关于CSS文本

文本是网页中最重要的一种内容形式,文本几乎可以写在任何地方,块级元素中可以写行内元素中也可以写.文本都是由一个个字符组成的 ,在css布局中,每一个字符都有一个em框,通常font-size设置的大小 ...

poj2350

#include #include int main() { ],tim,i; scanf("%d",&n ...

SyntaxHighlighter去掉右上角帮助图标的正确方法

先贴出问题图片: 关于这个问题.网上有很多的帖子,说了三种方法,经过测试,发现其中有些方法是有问题的,有的方法虽然能过解决问题,但是却会带来其他的错误.现在说明如下: 网上的原话: syntaxhig ...

解决:coursera 视频总是缓冲或者无法观看

关于这个问题,网上有很多的答案,但是可能我是win10 最近才更新了的,网上的方法都不能完全解决,然后自己搜了哈,最后综合自己解决了.具体方法如下. 在开始菜单中打开运行命令,输入gpedit.msc ...

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先需要在Vue项目中引入百度地图JavaScript API。 1. 在`index.html`文件中添加百度地图JavaScript API的引用: ```html <!-- 引入百度地图 JavaScript API --> <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script> ``` 其中,`AK`是你在百度地图开发者中心中申请的密钥。 2. 在Vue组件中添加地图容器和定位按钮: ```html <template> <div> <!-- 地图容器 --> <div id="map"></div> <!-- 定位按钮 --> <button @click="getLocation">定位</button> </div> </template> ``` 3. 在Vue组件的`<script>`标签中编写JavaScript代码: ```js export default { data() { return { // 地图对象 map: null, // 定位标记 marker: null, // 定位信息 location: null }; }, methods: { // 初始化地图 initMap() { const map = new BMap.Map('map'); map.centerAndZoom(new BMap.Point(116.404, 39.915), 18); this.map = map; }, // 获取当前位置信息 getLocation() { const geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition( position => { this.location = position; this.showLocation(); }, { enableHighAccuracy: true } ); }, // 在地图上显示位置信息 showLocation() { const { point, address } = this.location; if (!this.marker) { const marker = new BMap.Marker(point); this.map.addOverlay(marker); this.marker = marker; } else { this.marker.setPosition(point); } this.map.panTo(point); alert(`当前位置:${address}`); } }, mounted() { this.initMap(); } }; ``` 在上述代码中,我们首先定义了`map`、`marker`和`location`三个变量,分别表示地图对象、定位标记和位置信息。在`initMap`方法中,我们创建了一个地图对象并将其初始化。在`getLocation`方法中,我们通过`BMap.Geolocation`获取当前位置信息,并将其保存在`location`变量中。然后我们调用`showLocation`方法,在地图上显示定位标记,并弹窗显示当前位置信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值