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