手机端/网页 嵌套百度地图

网页嵌套几步到位

地址:http://api.map.baidu.com/lbsapi/creatmap/index.html;

输入你想要定位的地点,添加标注,获取代码,拷贝到自己网页中即可。

但是体积大,在手机端很卡。

手机端效果图:

手机端嵌套:

代码如下:

<html>

<body>

<legend>在线地图</legend>

<div id=‘allmap‘ style=‘width:100%; height:360px‘></div>

<script type=‘text/javascript‘ src=‘http://api.map.baidu.com/api?type=quick&ak=56563710f7448264e407591367dc1d77&v=1.0‘></script>

<script type=‘text/javascript‘>

// 百度地图API功能

var map = new BMap.Map(‘allmap‘);    // 创建Map实例

map.addControl(new BMap.ZoomControl()); // 添加缩放控件

map.addControl(new BMap.ScaleControl()); // 添加比例尺控件

var point = new BMap.Point(116.486588,40.003082);

var marker = new BMap.Marker(point);  // 创建标注

map.addOverlay(marker);              // 将标注添加到地图中

map.centerAndZoom(point, 15);

var opts = {

width : 120,     // 信息窗口宽度

height: 30,     // 信息窗口高度

title : ‘妙计旅行‘ , // 信息窗口标题

enableAutoPan : true //自动平移

}

var infoWindow = new BMap.InfoWindow(‘妙计旅行‘, opts);  // 创建信息窗口对象

marker.addEventListener(‘click‘, function(){

map.openInfoWindow(infoWindow,point); //开启信息窗口

});

</script>

</body>

</html>

曾经遇到一个头疼的问题,有的手机上显示正常,有的显示全白,而且手机型号没有规律!各种找不到问题,最终竟然是因为,#allmap外层div宽高用的百分比,以至于地图高度为0!手机端定义height:20%;这种要保证父div高度是固定的!切记。

时间: 2024-11-03 22:26:30

手机端/网页 嵌套百度地图的相关文章

手机端网页web开发要点

1.初始化 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,u

移动手机端网页布局 常用的3种方式 总结

手机端网页现在已经发展的非常迅猛,很多公司度需要网页能兼容各种不同尺寸屏幕的手机. 下面我给大家讲讲我常用的3放布局方式: 1:响应式布局. 可以用px作为像素,网页进行平铺.全屏的用100%.高度可以用px写死,宽度可以用百分比.不管网页怎么拉伸,高度不变,宽度会相应的扩大. 2:em/rem  方式布局. 可以设置好html,body的字体大小,然后用不同的尺寸手机访问的时候,我们可以去修改body的字体大小,网页(网页的内容用rem设置宽度.高度)的之内容会自动进行缩放. 代码如: bod

手机端网页设计尺寸大小

手机端网页设计尺寸大小 对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window XP常见分辨率1024×768下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584. 在Window 7常见分辨率1440×900下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716. 于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据

手机端网页返回顶部js代码

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>手机端网页返回顶部js代码</title>  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m

70.JS---利用原生js做手机端网页自适应解决方案rem布局

利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.s

整理:手机端网页调试方案

(本文前身是技术分享的ppt,因此有些图直接是ppt导出的.画的图全是原创,转载请注明,谢谢.) 在手机端网页开发的特定阶段,需要查看手机端的界面.交互与体验.2011年时,开发时有很大麻烦: 相应的静态文件在测试服务器上,没有上线,需要绑定hosts而手机端直接绑定hosts是需要越狱/root的 有的手机浏览器根本不认hosts文件,如uc 手机端的调试工具匮乏断点调试.查看变量.查看样式等都很困难 在电脑端改变UA和屏幕大小,并不能简单的模拟手机端的情形.比如触摸的事件处理 在2012年后

[共通]手机端网页开发问题及解决方法整理

Q1:手机端开发网页,界面适应问题.A1: <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> width - viewport的宽度 height - viewport的高度    initial-scale - 初始的缩放比例    minimum-scale - 允许用户缩放到的最小比

【常用】网页调用百度地图美化版

功能描述: 在web网页中调用百度地图API,在公司联系方式页面显示地图.(百度地图api版本2.0) 设置了百度自带的“高端灰”风格,加入了标注,和信息窗口,以及点击事件,支持鼠标滚轮缩放. 展示页代码面: <div id="ContactMap" style="width:800px;height:500px;"></div> <script type="text/javascript" src="ht

网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜索出自己要展示的位置,如下图所示. 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位.标记图标处可更换图标形状,名称和备注填入位置相关信息. 第四步:获取代码.将代码贴到你的网页