- Foxtable(狐表) (http://foxtable.net/bbs/index.asp)
-- 专家坐堂 (http://foxtable.net/bbs/list.asp?boardid=2)
---- 微信公众号使用百度地图JavaScript API功能 (http://foxtable.net/bbs/dispbbs.asp?boardid=2&id=119196)
-- 发布时间：2018/5/19 17:19:00
-- 微信公众号使用百度地图JavaScript API功能
已有坐标,是否可以在微信中调用百度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>
-- 发布时间：2018/5/20 22:14:00
--
嵌入css、js参考
http://www.foxtable.com/mobilehelp/scr/0061.htm
先把地图显示出来，固定坐标。如果要修改坐标，那写代码修改坐标位置即可。
-- 发布时间：2018/8/17 18:11:00
--
老师，目前的项目能达到的效果
| 下载信息 [文件大小： 下载次数： ] | |
 点击浏览该文件:地图项目.zip |
此主题相关图片如下：目前效果.jpg
1、如何将下图红圈代码放到项目中去？
2、自己的坐标如果修改？
此主题相关图片如下：百度代码.jpg
[此贴子已经被作者于2018/8/17 18:13:28编辑过]
-- 发布时间：2018/8/17 20:19:00
--
meta段不用理会
style样式看2楼帮助用法