瀏覽代碼

地图移动端适配

master
chenshengle 3 年之前
父節點
當前提交
6ec296bafa
共有 3 個文件被更改,包括 138 次插入122 次删除
  1. +78
    -122
      index.html
  2. +51
    -0
      js/flexible.js
  3. +9
    -0
      style/fengmap.css

+ 78
- 122
index.html 查看文件

@@ -5,146 +5,102 @@

<title>地图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <script src="./js/flexible.js"></script> -->
<script src="./lib/fengmap.map.min.js"></script>
<script src="./lib/fengmap.plugin.min.js"></script>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="./style/fengmap.css">
</head>

<body>
<div id="fengmap"></div>
<!-- <div class="aabb">11231231</div> -->
</body>
<script>
document.write("<s"+"cript type='text/javascript' src='./common/js/h5_game_common.js?version="+Math.random()+"'></scr"+"ipt>");
document.write("<s" + "cript type='text/javascript' src='./common/js/h5_game_common.js?version=" + Math.random() + "'></scr" + "ipt>");
var map;
// let baseUrl='https://ctest.malls.iformall.com/C';
let baseUrl='/C';
$.ajax({
url:baseUrl + "/api/fengniaomap/getConfig",
type:"GET",
dataType: "json", //返回数据格式为json
headers: {
'content-type':'application/json',
"token":"c34103fa-1d40-4ba7-95a4-28975e1d9143:789:wx-cuser",
// "token":getQueryString('token')
},
success:function(res){
const data = res.data;
let mapOptions = {
appName: data.appName,
key: data.appKey,
mapID: data.mapId,
container: document.getElementById("fengmap"),
// mapURL: `/api/mapfile/${data.tenantId}/`,
// themeURL: `/api/mapfile/${data.tenantId}/theme/`,
mapURL:"./data/",
themeURL:"./data/theme/",
themeID: data.themeId,
level: data.defaultFloor
}
let map = new fengmap.FMMap(mapOptions);
// let mapOptions = {
// appName: "金茂泊悦地图",
// key: "cb54a3aa3a7066ec99b565363f63cb8c",
// mapID: "1412326198669561858",
// container: document.getElementById("fengmap"),
// // mapURL: `/api/mapfile/${data.tenantId}/`,
// // themeURL: `/api/mapfile/${data.tenantId}/theme/`,
// mapURL:"../../data/",
// themeURL:"../../data/theme/",
// themeID: '2001',
// level: 1
// }
let toolbarOptions = {
//控件产生
floorButtonCount: 3,
viewModeControl: true, //是否显示2、3D切换按钮,默认为true
floorModeControl: true, // 是否显示楼层控件,默认为true
needAllLayerBtn: true, //是否显示单多层按钮,默认为true
position: 3, //控件位置。分为左上 1、左下2、右上3、右下4。
offset: { x: 0, y: 166 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
};
let zoomOptions = {
position: 3, //分为左上 1、左下2、右上3、右下4。
offset: { x: 0, y: 50 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
};
let compassOptions = {
position: 2 //分为左上 1、左下2、右上3、右下4。
};
map.on("loaded", function() {
let toolbar = new fengmap.FMToolbar(toolbarOptions); //楼层控件
let zoomToolbar = new fengmap.FMZoomControl(zoomOptions); //缩放控件
let compass = new fengmap.FMCompass(compassOptions); //指南针控件
toolbar.addTo(map);
zoomToolbar.addTo(map);
compass.addTo(map);
let baseUrl = 'https://ctest.malls.iformall.com/C';

compass.on("click", function() {
map.setRotation({

// let baseUrl='/C';
$.ajax({
url: baseUrl + "/api/fengniaomap/getConfig",
type: "GET",
dataType: "json", //返回数据格式为json
headers: {
'content-type': 'application/json',
"token": "c34103fa-1d40-4ba7-95a4-28975e1d9143:789:wx-cuser",
// "token":getQueryString('token')
},
success: function (res) {
const data = res.data;
let mapOptions = {
appName: data.appName,
key: data.appKey,
mapID: data.mapId,
container: document.getElementById("fengmap"),
// mapURL: `/api/mapfile/${data.tenantId}/`,
// themeURL: `/api/mapfile/${data.tenantId}/theme/`,
mapURL: "./data/",
themeURL: "./data/theme/",
themeID: data.themeId,
level: data.defaultFloor
}
let map = new fengmap.FMMap(mapOptions);
// let mapOptions = {
// appName: "金茂泊悦地图",
// key: "cb54a3aa3a7066ec99b565363f63cb8c",
// mapID: "1412326198669561858",
// container: document.getElementById("fengmap"),
// // mapURL: `/api/mapfile/${data.tenantId}/`,
// // themeURL: `/api/mapfile/${data.tenantId}/theme/`,
// mapURL:"../../data/",
// themeURL:"../../data/theme/",
// themeID: '2001',
// level: 1
// }
let toolbarOptions = {
//控件产生
floorButtonCount: 3,
viewModeControl: true, //是否显示2、3D切换按钮,默认为true
floorModeControl: true, // 是否显示楼层控件,默认为true
needAllLayerBtn: true, //是否显示单多层按钮,默认为true
position: 3, //控件位置。分为左上 1、左下2、右上3、右下4。
offset: { x: 0, y: 166 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
};
let zoomOptions = {
position: 3, //分为左上 1、左下2、右上3、右下4。
offset: { x: 0, y: 50 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
};
let compassOptions = {
position: 2 //分为左上 1、左下2、右上3、右下4。
};


map.on("loaded", function () {
let toolbar = new fengmap.FMToolbar(toolbarOptions); //楼层控件
let zoomToolbar = new fengmap.FMZoomControl(zoomOptions); //缩放控件
let compass = new fengmap.FMCompass(compassOptions); //指南针控件
toolbar.addTo(map);
zoomToolbar.addTo(map);
compass.addTo(map);

compass.on("click", function () {
map.setRotation({
rotation: 0,
animate: true,
duration: 0.3,
finish: function() {
// console.log("setRotation");
finish: function () {
// console.log("setRotation");
}
});
});
});
}
})
// setTimeout(() => {
// var options = {
// appName: '金茂泊悦地图',
// key: 'cb54a3aa3a7066ec99b565363f63cb8c',
// mapID: '1412326198669561858',
// container: document.getElementById('fengmap'),
// mapURL: './data/',
// themeURL: './data/theme/',
// themeID: '2001',
});
});
}
})

// }
// let toolbarOptions = {
// //控件产生
// floorButtonCount: 3,
// viewModeControl: true, //是否显示2、3D切换按钮,默认为true
// floorModeControl: true, // 是否显示楼层控件,默认为true
// needAllLayerBtn: true, //是否显示单多层按钮,默认为true
// position: 3, //控件位置。分为左上 1、左下2、右上3、右下4。
// offset: { x: 0, y: 166 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
// };
// let zoomOptions = {
// position: 3, //分为左上 1、左下2、右上3、右下4。
// offset: { x: 0, y: 50 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
// };
// let compassOptions = {
// position: 2 //分为左上 1、左下2、右上3、右下4。
// };
// map = new fengmap.FMMap(options);

// map.on('loaded', function () {
// let toolbar = new fengmap.FMToolbar(toolbarOptions); //楼层控件
// let zoomToolbar = new fengmap.FMZoomControl(zoomOptions); //缩放控件
// let compass = new fengmap.FMCompass(compassOptions); //指南针控件
// toolbar.addTo(map);
// zoomToolbar.addTo(map);
// compass.addTo(map);
// compass.on("click", function () {
// map.setRotation({
// rotation: 0,
// animate: true,
// duration: 0.3,
// finish: function () {
// // console.log("setRotation");
// }
// });
// });
// });
// }, 2000);

</script>

</html>

+ 51
- 0
js/flexible.js 查看文件

@@ -0,0 +1,51 @@
//designWidth:设计稿的实际宽度值,需要根据实际设置
//maxWidth:制作稿的最大宽度值,需要根据实际设置
//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
(function(designWidth, maxWidth) {
console.log("我执行了");
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
//浏览器竖屏与横屏转换的BUG。
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}

if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
refreshRem();

win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);

win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);

if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);

+ 9
- 0
style/fengmap.css 查看文件

@@ -122,3 +122,12 @@ body,
left: 80px;
bottom: -39px;
}
.aabb{
width: 300px;
height: 300px;
background-color: #337ab7;
z-index: 1000000000000;
position:fixed;
top: 0;
left: 0;
}

Loading…
取消
儲存