bingying地图移动端实战

时间：2018-02-23 17:11:46 阅读：238 评论：0 收藏：0 [点我收藏+]

标签：return one http window scala btn png images new

效果图

技术分享图片

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="format-detection" content="telephone=no,email=no" />
<link rel="stylesheet" type="text/css" href="/css/htjhouse/map.css"/>
<script>
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector(‘meta[name="viewport"]‘),h=e.querySelector(‘meta[name="flexible"]‘),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>
<title>地图</title>
<script src="/js/lib/jquery.min.js" type="text/javascript"></script>

</head>
<body>
<div id="myMap"></div>
<div class="gofirst">.</div>
<div class="around-mesg" id="tsxx-pt" style="display: none;">
<div class="map-title"><div class="map-title-txt">共<span id="allnumm"></span>条数据</div><div class="map-btn-wrap"></div></div>
<div class="tsxx-pt-content"></div>
</div>
<script src="/js/lib/mapUtil.js" type="text/javascript"></script>
<script type=‘text/javascript‘ src=‘https://www.bing.com/api/maps/mapcontrol?key=An24SrMygrUyZA9aRecJUtr5wu2YMX8Qze_ga_Gl3XzLERYBXaP3A7KMze8aBIB_&callback=loadMapScenario‘ async defer></script>
</body>
</html>

css:

@charset "UTF-8";
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent; }

*:not(input, textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none; }

html, body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, a, img, th, td, form, fieldset, iframe, object, pre, code, legend, blockquote {
margin: 0;
padding: 0;
border: 0;
outline: 0; }

html, body {
width: 100%;
height: 100%; }

html {
color: #000;
background: #fff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }

body {
word-wrap: break-word; }

body, button, input, select, textarea {
font: 400 12px/1.5 ‘PingFang SC‘, ‘HelveticaLight‘, ‘Helvetica Neue‘, ‘Microsoft Yahei‘,‘Heiti SC‘, tahoma,arial,sans-serif; }

ol, ul, li {
list-style: none; }

table {
border-collapse: collapse;
border-spacing: 0; }

a {
color: #333;
text-decoration: none;
border: none;
outline: none; }

a:hover {
text-decoration: none; }

img {
border: none;
vertical-align: middle; }

button,
input[type=button],
input[type=submit],
input[type=text] {
cursor: pointer;
outline: none;
-webkit-appearance: none;
appearance: none; }

input:focus {
outline: none; }

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }

h1, h2, h3, h4, h5, h6 {
font-size: 100%; }

/* clear float */
.clearfix:after {
display: block;
content: "";
height: 0;
clear: both;
visibility: hidden; }

.clearfix {
zoom: 1; }

/*表单*/
input, textarea {
-webkit-appearance: none;
appearance: none;
border-radius: 0; }

button {
border: none; }

/*缩放1px为0.5px*/
#myMap {
width: 100%;
height: 100%; }

.around-mesg {
position: fixed;
bottom: 0.266666rem;
width: 9.2rem;
left: 50%;
margin-left: -4.6rem; }

.itemwrap {
display: flex;
align-items: center;
background-color: #fff;
border: 1px solid #b7b9c2;
border-top: 0;
border-left: 0;
border-right: 0; }

.itemwrap:first-child {
border-top: 1px solid #b7b9c2; }

.ptss-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.32rem;
color: #666;
background-color: #fff;
text-align: left;
padding: 0.266666rem 0.4rem; }

.ptss-inner-item-left {
display: flex;
align-items: center; }
.ptss-inner-item-left span:first-child {
font-size: 0.293333rem;
border-radius: 0.066666rem;
padding: 0 0.16rem;
margin-right: 0.133333rem; }
.ptss-inner-item-left span:last-child {
font-size: 0.293333rem;
color: #666; }
.ptss-inner-item-left .gy {
color: #39ca40;
border: 1px solid #39ca40; }
.ptss-inner-item-left .yy {
color: #ec3724;
border: 1px solid #ec3724; }
.ptss-inner-item-left .yw {
color: #f27f39;
border: 1px solid #f27f39; }
.ptss-inner-item-left .sc {
color: #efc814;
border: 1px solid #efc814; }

.ptss-item:last-child {
border-right: 0; }

.ptss-inner-item:last-child {
font-size: 0.32rem;
color: #366bca; }

#MapStyleSelector {
display: none; }

#ZoomOutButton {
display: block; }

.map-title {
padding: 0.4rem;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.32rem;
color: #666; }

.tsxx-pt-content {
overflow: hidden; }

.MicrosoftMap .NavBar_Container.horizontal .NavBar_Button {
clear: inherit !important;
float: inherit !important; }

.MicrosoftMap .NavBar_Container .NavBar_Button {
margin-bottom: 0 !important; }

.gofirst {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
position: fixed;
top: 80px;
right: 12px;
border: 2px solid #444;
box-sizing: border-box;
font-size: 30px;
color: #444;
text-align: center;
line-height: 6px; }

/*# sourceMappingURL=map.css.map */

js:

var staticrund = 10;
var H = 8;
var threeH = 0;
var index = 0;

function count() {
$(".around-mesg").show();
index = index + 1;
if($(".itemwrap").length == 3) {
threeH = $(".tsxx-pt-content").height();
$(".tsxx-pt-content").height(threeH);

}
H = $(".ptss-item:last-child").outerHeight() + H;
$("#allnumm").text(index);

}
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
}

Microsoft.Maps.SpatialDataService.QueryAPIManager.search(queryPackOptions, map, function(data) {
if(data.length == 0) {
return false;
}
var pushpin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(data[0].metadata.Latitude, data[0].metadata.Longitude), {
color: ‘#39ca40‘
});
var pushpin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(data[1].metadata.Latitude, data[1].metadata.Longitude), {
color: ‘#39ca40‘
});
map.entities.push(pushpin1);
map.entities.push(pushpin2);

for(var i = 0; i < 2; i++) {
var itemwrap = $(‘<div class="itemwrap"></div>‘);
var ptssItem = $(‘<div class="ptss-item"></div>‘);
var ptssinneritem = $(‘<div class="ptss-inner-item ptss-inner-item-left"></div>‘);
var biaoqian = $("<span class=‘gy‘>公园</span>");
var name = $("<span>" + data[i].metadata.Name + "</span>");
biaoqian.appendTo(ptssinneritem);
name.appendTo(ptssinneritem);
var ptsskl = $(‘<div class="ptss-inner-item">‘ + (data[i].metadata.__Distance).toFixed(2) + ‘km</div>‘);
ptssinneritem.appendTo(ptssItem);
ptsskl.appendTo(ptssItem);

ptssItem.appendTo(itemwrap);
itemwrap.appendTo($(".tsxx-pt-content"));
itemwrap.attr("lat", data[i].metadata.Latitude);
itemwrap.attr("long", data[i].metadata.Longitude);
itemwrap.on("click", function() {
var lat = $(this).attr("lat");
var Long = $(this).attr("long");
map.setView({
center: new Microsoft.Maps.Location(lat, Long)
});
$(".tsxx-pt-content").stop().animate({
"height": "0"
}, 300);
})
count();

}

}, null, false, function(status, message) {

});

for(var i = 0; i < 2; i++) {
var itemwrap = $(‘<div class="itemwrap"></div>‘);
var ptssItem = $(‘<div class="ptss-item"></div>‘);
var ptssinneritem = $(‘<div class="ptss-inner-item ptss-inner-item-left"></div>‘);
var biaoqian = $("<span class=‘yy‘>医院</span>");
var name = $("<span>" + data[i].metadata.Name + "</span>");
biaoqian.appendTo(ptssinneritem);
name.appendTo(ptssinneritem);
var ptsskl = $(‘<div class="ptss-inner-item">‘ + (data[i].metadata.__Distance).toFixed(2) + ‘km</div>‘);
ptssinneritem.appendTo(ptssItem);
ptsskl.appendTo(ptssItem);

}, null, false, function(status, message) {

});

for(var i = 0; i < 2; i++) {
var itemwrap = $(‘<div class="itemwrap"></div>‘);
var ptssItem = $(‘<div class="ptss-item"></div>‘);
var ptssinneritem = $(‘<div class="ptss-inner-item ptss-inner-item-left"></div>‘);
var biaoqian = $("<span class=‘sc‘>商场</span>");
var name = $("<span>" + data[i].metadata.Name + "</span>");
biaoqian.appendTo(ptssinneritem);
name.appendTo(ptssinneritem);
var ptsskl = $(‘<div class="ptss-inner-item">‘ + (data[i].metadata.__Distance).toFixed(2) + ‘km</div>‘);
ptssinneritem.appendTo(ptssItem);
ptsskl.appendTo(ptssItem);

}, null, false, function(status, message) {

});

var ptssItem = $(‘<div class="ptss-item"></div>‘);
var ptssinneritem = $(‘<div class="ptss-inner-item ptss-inner-item-left"></div>‘);
var biaoqian = $("<span class=‘yw‘>游玩</span>");
var name = $("<span>" + data[i].metadata.Name + "</span>");
biaoqian.appendTo(ptssinneritem);
name.appendTo(ptssinneritem);
var ptsskl = $(‘<div class="ptss-inner-item">‘ + (data[i].metadata.__Distance).toFixed(2) + ‘km</div>‘);
ptssinneritem.appendTo(ptssItem);
ptsskl.appendTo(ptssItem);

}, null, false, function(status, message) {

});

Microsoft.Maps.Events.addHandler(map, ‘viewchange‘, function() {
$(".tsxx-pt-content").stop().animate({
"height": 0
}, 300);

});
Microsoft.Maps.Events.addHandler(map, ‘viewchangeend‘, function() {

});
$(".gofirst").on("touchend", function() {
map.setView({
center: new Microsoft.Maps.Location(dLat, dLong)
});
});

});
}
$(function() {
var startY;
$(".tsxx-pt-content").bind(‘touchstart‘, function(e) {

startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".tsxx-pt-content").bind(‘touchmove‘, function(e) {
endX = e.originalEvent.changedTouches[0].pageX,
endY = e.originalEvent.changedTouches[0].pageY;
distanceX = endX - startX;
distanceY = endY - startY;
if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
console.log(‘往右滑动‘);
} else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
console.log(‘往左滑动‘);
} else if(Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
$(".tsxx-pt-content").stop().animate({
"height": H + "px"
}, 300);

} else if(Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
var nowH = $(".tsxx-pt-content").outerHeight();
if(nowH == H) {
$(".tsxx-pt-content").stop().animate({
"height": threeH + "px"
}, 300);
} else if(nowH == threeH) {
$(".tsxx-pt-content").stop().animate({
"height": "0"
}, 300);
}

} else {
console.log(‘点击未滑动‘);
}

});
$(".map-title").on("touchend", function() {
if($(".tsxx-pt-content").height() != 0) {
return false;
}
$(".tsxx-pt-content").stop().animate({
"height": threeH + "px"
}, 300);

})
document.addEventListener(‘touchmove‘, function(e) {
e.preventDefault();
}, false);
})

bingying地图移动端实战

标签：return one http window scala btn png images new

原文地址：https://www.cnblogs.com/wangkdeblogs/p/8462503.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行