MUI框架中实现附近搜索功能

最新推荐文章于 2022-02-18 14:24:23 发布

易航动效

最新推荐文章于 2022-02-18 14:24:23 发布

阅读量935

点赞数

分类专栏： Hybrid App开发文章标签： MUI 地图

本文链接：https://blog.csdn.net/qq_24343389/article/details/72772897

版权

Hybrid App开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no width=device-width" />
<link rel="stylesheet" href="css/mui.min.css" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}

.mui-content {
position: relative;
}

#l-map {
height: 300px;
width: 100%;
}

#r-result {
overflow-y: auto;
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=http://api.map.baidu.com/api?v=2.0&ak=ac3g8TDDUWXt4NWDWntisk8u2YqxaRXC"></script>
<title>根据多关键字本地搜索</title>
</head>

<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">体育地图</h1>
</header>
<div class="mui-content">
<div id="l-map"></div>
<div id="r-result"></div>
</div>

</body>

</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {

plus.geolocation.getCurrentPosition(function(p) {
// alert("Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude);
var map = new BMap.Map("l-map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(p.coords.longitude, p.coords.latitude), 11);
var myKeys = ["体育馆", "健身场所"];
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map,
panel: "r-result"
},
pageCapacity: 5
});
local.searchInBounds(myKeys, map.getBounds());
//----------------------------------------------------------
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);

// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e) {
anchor: BMAP_ANCHOR_BOTTOM_RIGHT;
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
// alert("当前定位地址为：" + address);
});
geolocationControl.addEventListener("locationError", function(e) {
// 定位失败事件
alert(e.message);
});
map.addControl(geolocationControl);
//----------------------------------------------------------------

});
});

//界面样式设置
var height = window.screen.height - 300 - 51;
document.getElementById("r-result").style.height = height;

</script>

易航动效

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
MUI框架中实现附近搜索功能

body,html,#allmap {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}.mui-content {position: relative;}#l-map {height: 300px;width: 100%;}#r-result {overflo
复制链接

扫一扫