circle = new plus.maps.Circle(new plus.maps.Point(116.347496, 39.970191), 500);
circle.setFillColor("#0062CC");
circle.setFillOpacity(0.3);
circle.setStrokeColor("#0062CC");
circle.setLineWidth(2);
map.addOverlay(circle);
circle.setRadius(1000);//无效
circle.setFillColor("#006111");//有效 以上是2个按钮执行的代码片段
下面是全部代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Map Example</title>
<link href="../css/mui.css" rel="stylesheet" />
<link href="../css/cem.css" rel="stylesheet" />
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
var em = null,
map = null;
// H5 plus事件处理
function plusReady() {
// 确保DOM解析完成
if (!em || !window.plus || map) {
return
};
map = new plus.maps.Map("map");
map.centerAndZoom(new plus.maps.Point(116.3977, 39.906016), 12);
}
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded", function() {
em = document.getElementById("map");
plusReady();
}, false);
// 添加标点
// var marker = null;
var circle = null;
function addMarker() {
if (circle) {
return;
}
// marker = new plus.maps.Marker(new plus.maps.Point(116.347496, 39.970191));
// marker.setIcon("../images/logo.png");
// marker.setLabel("HBuilder");
// var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
// marker.setBubble(bubble);
circle = new plus.maps.Circle(new plus.maps.Point(116.347496, 39.970191), 500);
circle.setFillColor("#0062CC");
circle.setFillOpacity(0.3);
circle.setStrokeColor("#0062CC");
circle.setLineWidth(2);
map.addOverlay(circle);
// map.addOverlay(marker);
}
// 删除标点
function removeMarker() {
// map.removeOverlay(circle);
// delete circle;
// circle = null;
circle.setRadius(1000);
circle.setFillColor("#006111");
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav cem-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left cem-txt-white"></a>
<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right cem-txt-white"></a>
<h1 class="mui-title cem-txt-white">找找公厕</h1>
</header>
向地图中添加覆盖物
<br/>
<button onclick="addMarker()" style="top: 50px;">添加标点</button>
<button onclick="removeMarker()" style="top: 50px;">删除标点</button>
<br/>
<div id="map">地图加载中...</div>
</body> </html>
2 个回复
binyy (作者)
在线等啊 求助啊
binyy (作者)
在线等啊 求助啊