mui百度地图开发

最新推荐文章于 2023-05-26 11:13:54 发布
最新推荐文章于 2023-05-26 11:13:54 发布
阅读量516 收藏
点赞数
分类专栏： mui App 文章标签： mui webapp baiduMap 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chief_fly/article/details/86638590
版权

首先准备工作，先在百度开发平台申请app的地图key，需要在manifest.json文件配置百度SDK参数
在这里插入图片描述

地图主界面代码片段：

<body>
		<header id="header" class="mui-bar mui-bar-nav" style="background-color: gold">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title" style="color: white;">百度地图</h1>
			<!--<a class="mui-pull-right mui-icon mui-icon-chat" style="color: white;" onclick="info()"></a>-->
		</header>
		<div id="map">地图加载中...</div>
</body>

js加载片段

<script>
	var ws = null,
		wo = null;
	var em = null,
		map = null,
		pcenter = null;
	//生成2个对象分别控制主窗口和菜单窗口；
	var menu = null,
		main = null;
	var showMenu = false;
	var isInTransition = false;
	var servicearr = [];
	var bzmarkers = {};
	var Lon = 0; //获取经度
	var Lat = 0; //获取纬度		
	var mypoi=null;

    //开始预加载菜单页；
    mui.plusReady(function() {
    	
        
        if(!em||ws){return};				
		ws=plus.webview.currentWebview();
		wo=ws.opener();
		pcenter = new plus.maps.Point(101.770073,36.635897);
		setTimeout(function(){
			map=new plus.maps.Map("map");
			userLocation();
			pcenter = new plus.maps.Point(Lon, Lat);

			map.centerAndZoom(pcenter, 15);
			createSubview();
		}, 300);
		// 显示页面并关闭等待框
		ws.show("pop-in");

	});

	function getServiceOrg(lng, lat, varsTypeName) {
		servicearr = [];
		if(lng!=''&&lng!=null){
			Lon=lng;
		}
		if(lat!=''&&lat!=null){
			Lat=lat;
		}

		mui.ajax(httpUrl + 'api/app/oldman/serviceOrgAll', {
			type: 'POST', //HTTP请求类型
			data: {
				lng: Lon, //118.694
				lat: Lat, //32.901
				serviceRadius: 10000, //搜索范围5公里
				serviceProjectName: varsTypeName
			},
			dataType: 'json', //服务器返回json格式数据
			async: false,
			timeout: 10000, //超时时间设置为10秒；
			success: function(data) {
				if(data.success != 1) {
					mui.toast(data.message);
				} else {

					for(var i = 0; i < data.data.length; i++) {
					//	console.log(data.data);
						servicearr.push(data.data[i]);
					}
					bzmarkers = {
						serverOrgs: servicearr
					};

					setTimeout(function(){
						addMarker("serverOrgs");
					}, 1000);
				}
			},
			error: function(xhr, type, errorThrown) {
				mui.toast("服务器断开连接，请求失败!");
			}
		});
		
	}

	//      if(window.plus){
	//			plusReady();
	//		}else{
	//			document.addEventListener("plusready",plusReady,false);
	//		}

	// DOMContentloaded事件处理
	document.addEventListener("DOMContentLoaded", function() {
		em = document.getElementById("map");
		window.plus && plusReady();
	}, false);

	function userLocation() {
		map.clearOverlays();
//			map.showUserLocation(true);
			map.getUserLocation(function(state, pos) {
				if(0 == state) {
					map.setCenter(pos);
					Lon = pos.getLng(); //获取经度
					Lat = pos.getLat();
				getServiceOrg(Lon, Lat, ''); //118.78,32.03,
				
			}
		});
	}

	function createMarker(lonLat, type, mrkInfo) {
		var marker = new plus.maps.Marker(lonLat);
		if(type == 'user') {
		var circleObj=new plus.maps.Circle(new plus.maps.Point(lonLat.getLng(), lonLat.getLat()),10000);//十公里范围内
		circleObj.setFillColor( "#E3E3A4" );// 设置圆圈的填充颜色
		circleObj.setFillOpacity(0.3);// 设置圆圈填充颜色的透明度
		circleObj.setStrokeColor("#8F270D")// 设置圆圈边框的颜色
		circleObj.setStrokeOpacity(0.3);// 设置圆圈边框的透明度
		circleObj.setLineWidth(1)
		map.addOverlay(circleObj);
			map.setZoom(13);
			marker.setIcon("../img/user/dingwei.png");
			var userName = plus.storage.getItem("name");
			var bubble = new plus.maps.Bubble(userName);
			marker.setBubble(bubble);
		} else if(type == 'serverOrgs') {
			marker.setIcon("../img/user/point.png");
			marker.setLabel(mrkInfo.serviceOrgName);
			marker.onclick=function(e){
				//组织点位点击事件
				var m= plus.webview.getWebviewById("userMainMaker");
				plus.webview.close(m);
			var wMaker = plus.webview.create('userMainMaker.html', 'userMainMaker', {
				bottom: '10px',
				width:'98%',
				height: '50%',
				left:'1%',
				position: 'absolute',
				scrollIndicator: 'none',
				background: 'white'
				},{
					param:mrkInfo
				}
			);
			ws.append(wMaker);
			
			}
				
		}else if(type =='ylOrgs') {
			marker.setIcon('../img/user/username.png');
		}
		map.setCenter(lonLat);
		map.addOverlay(marker);

	}

	function createSubview() {
		var topoffset = '44px';
		if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
			topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 44) + 'px';
		}
		
//			var wsub = plus.webview.create('userMainTop.html', 'userMainTop', {
//				top: topoffset,
//				height: '15%',
//				position: 'absolute',
//				scrollIndicator: 'none',
//				background: 'transparent'
//			});
//			ws.append(wsub);

		var wbottom = plus.webview.create('userMainBottom.html', 'userMainBottom', {
			bottom: '10px',
			height: '250px',
			position: 'absolute',
			scrollIndicator: 'none',
			background: 'transparent'
		});
		ws.append(wbottom);

	}

	function addMarker(type) {
		map.clearOverlays();
		createMarker(mypoi,'user','');
		for(var i = 0; i < bzmarkers[type].length; i++) {
			var poi = new plus.maps.Point(bzmarkers[type][i].lng, bzmarkers[type][i].lat);
			createMarker(poi, type, bzmarkers[type][i]);

		}
	}

	function resetMap() {
		map.reset();
	}

	function info() {

		mui.openWindow({
				url : 'userinfo.html',
				id : 'userinfo.html'
		});

	}
Chief_fly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
MUI 使用百度地图
iwusan
03-26 5515
1.申请百度地图秘钥。地址：http://lbsyun.baidu.com/apiconsole/key2.创建应用（Android/IOS）   a)Android SDK      应用名称：随便填写。      应用类型：选择Android SDK      启用服务：建议全选      发布版SHA1：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0...
mui获取经纬度和地址信息（百度地图 javascript api）
小书包大梦想的博客
02-23 1147
首先，介绍实现的原理： 通过使用百度地图提供的api进行开发。参考的是百度地图官方的javascript api文档。点击进入官方文档地址 在这之前，首先得获得百度地图api 的秘钥，头部引入需要： &lt;script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=你的秘钥"&gt;&lt;/s...
mui，js，百度地图实现定位
01-30
mui+js+百度地图实现移动端定位。使用国内开源移动端框架mui，js实现百度地图定位功能
MUI框架---实现百度地图定位功能
weixin_33884611的博客
12-13 283
1 2 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HR3RRyTsXYdQ3QzzG5yUkg0q"></script> <script type="text/javascript" src="http...
mui开发app调用baidu地图实现精准定位
u013373006的博客
08-02 6360
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content="width=device-width,initial
html5 mui 手机首页排版 地图 实现
11-08
html5 mui 手机首页排版 地图 实现 html5 mui 手机首页排版 地图 实现 html5 mui 手机首页排版 地图 实现
Mui手机打开地图
qq_39282774的博客
12-23 189
openMapRoute() { const lat = '116.328103' const lon = '39.900835' const cityName = '北京市丰台区莲花池东路118号' let url = '' if (plus.os.name == 'Android') { const hasBaiduMap = plus.runtime.isApplicationExist({ pname: 'com.baidu.BaiduMap',
mui开发的租房app
07-22
3. 地图集成：结合高德地图或百度地图的JavaScript API，开发者可以在App内嵌入地图，展示房源地理位置。通过mui的事件监听，用户可以点击地图上的标记直接查看房源详情。 4. 搜索筛选：利用mui的form组件收集用户...
hbuilder做的百度地图搜索
06-19
本项目"我的美食地图"是基于HBuilder和MUI框架开发的一个地图搜索应用，主要功能是结合百度地图API，帮助用户寻找周边的美食地点。在这样的应用中，涉及到的知识点主要包括以下几个方面： 1. **HBuilder使用**：...
使用mui显示百度地图
zh3210576的博客
11-29 686
使用mui显示百度地图 android应用在使用百度地图的时候通常需要配置很多信息，那么mui打包的APK可以直接通过JavaScript的Api实现简单的地图功能 1.百度地图开放平台的秘钥 我们可以直接创建浏览器端的AK 秘钥即AK，留着备用 2.mui界面设计 主要功能： 1.显示当前定位（需要真机才有效果） 2.城市搜索 3.选中点的标记 3.对应代码 <!doctype html> <html> <head> <meta charset="u
mui 基于高德地图定位和地址转换
03-27
前不久用mui做一个电商的app，有定位需求，所以做了一个高德地图web端的定位。
MUI框架中使用百度地图（全网独一份最详细的图文教程）
TrueDei
11-25 2450
MUI框架中使用百度地图（全网独一份最详细的图文教程） 文章目录MUI框架中使用百度地图（全网独一份最详细的图文教程）注意事项效果一、申请百度地图权限二、配置应用三、在页面上使用四、测试效果以上步骤可以重复执行看到了吧，MuMu模拟器也是使用的百度地图，真有缘呀，hhh 注意事项 如果还没有注册的童鞋可以先去百度地图开放平台注册一下账号，如果不明白可以参考：https://blog.csdn.ne...
MUI框架-13-使用百度地图 API（图文教程）
肖朋伟
11-07 7668
MUI框架-13-使用百度地图 API（图文教程） 一、申请百度地图权限 1.打开 百度地图开放平台：http://lbsyun.baidu.com/apiconsole/key 2.【创建应用】&amp;amp;gt;【填写必要信息】 【提示】： 1.应用名称：随便填写。 2.应用类型：选择Android SDK 3. 启用服务：建议全选 4.发布版SHA1：BA:AD:09:3A:82:82:9F:B4:...
百度地图覆盖图层层级展示导致无法获取的事件
最新发布
05-26 470
通过修改不同覆盖物的父级div容器的z-index属性，将图层整体上移或下移。比如想修改那个图层的显示层级（将z-index:700 修改为z-index:900）可以通过如下代码设置//创建地图 console . log(map . getPanes());// 展示信息-获取panes图层信息内容 map . getPanes() . markerMouseTarget . style . zIndex = 450;//修改图层z-index});});});
Hbuilder MUI webview 创建页面self.append(sub)与sub.show()区别
水色陀螺
04-19 2084
self.append(sub);
mui：在javascript中使用百度地图实现精确定位（一）
风雨落
07-24 1万+
在国内一般都使用百度地图、高德地图等来实现定位， 首先你要申请密钥， 可以参考网上的教程https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html 其次就是使用了，引入<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的ak码
Hbuilder中百度地图插件的使用
热门推荐
弹指间，BUG灰飞烟灭！
06-24 2万+
需要一个app,有地图和导航功能，需要调用百度地图插件。 1.打开百度地图LBS开放平台（http://lbsyun.baidu.com/）。 2.点击API控制台进入。 3.在工具Hbuilder中创建html5+APP。 新建移动app(HelloMap)–>模板选择HTML5+–>创建 将新建项目plus文件夹中demo文件删除，只留以下三个文件
Mui本地打包笔记（二）集成第三方SDK（以百度地图为例）
LmingAn的博客
03-23 5012
离线打包集成百度地图SDK 官方文档【Android离线打包地图插件配置】 HBuilder中地图的配置和百度地图AppKey的申请说明 　　这里我将百度地位和百度地图需要的SDK都集成到Android原生项目中。这一章只是让地图能正常的显示出来，定位这里将会在下一章的动态权限请求中用到。这一章只要地图能正常显示就集成成功了，Andorid原生项目集成5+SDK运行Mui的项目请参考Mui本地打...
Hbuilder开发app引入地图
qq_41078088的博客
04-25 2720
由于开发需要使用到地图进行定位，所以在网上找了许多的资料，一开始，准备引入百度地图，但是因为各种原因，引入失败，只好另寻他路，找到了HTML5中国产业联盟这个网址：http://www.html5plus.org/doc/zh_cn/maps.html 里面关于Hbuilder开发App的各种详细介绍，例如：调用手机摄像头、获取手机的通讯录等等。 里面其中的一个是关于Maps的，如何引入手机的内置...
使用MUI开发HTML5应用：UI组件详解
“HBuilder-MUI-开发文档.pdf是关于HTML5应用开发的文档，主要介绍了MUI框架中的UI组件，如Accordion（手风琴效果）和Actionsheet（操作表单）的使用方法。” 在HTML5应用开发中，MUI是一个流行且强大的前端框架，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值