已有坐标,是否可以在微信中调用百度JavaScript API v3.0功能,显示动态地图?
参考老师的:百度ECharts使用示例
http://www.foxtable.com/bbs/dispbbs.asp?BoardID=2&ID=103519&skin=0
我的想法是:代码中插入div,用于显示从服务器返回的地图数据,
With wb.AddArticle("","map1")
.AddContent("<div id=""map"" style=""width: 800px;height:430px;""></div>")
End With
但不知道,怎么写JS代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" c />
<meta name="viewport" c />
<title>CanvasLayer</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<style type="text/css">
body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
var mp = new BMap.Map("container");
mp.centerAndZoom(new BMap.Point(120.7997106,31.02961177), 20);
mp.enableScrollWheelZoom();
var canvasLayer = new BMap.CanvasLayer({
update: update
});
function update() {
var ctx = this.canvas.getContext("2d");
if (!ctx) {
return;
}
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var temp = {};
ctx.fillStyle = "rgba(50, 50, 255, 0.7)";
ctx.beginPath();
var data = [
new BMap.Point(116.297047,39.979542),
new BMap.Point(116.321768,39.88748),
new BMap.Point(116.494243,39.956539)
];
for (var i = 0, len = data.length; i < len; i++) {
var pixel = mp.pointToPixel(data[i]);
ctx.fillRect(pixel.x, pixel.y, 30, 30);
}
}
mp.addOverlay(canvasLayer);
</script>