Foxtable(狐表) → 用户栏目 → 专家坐堂 → 微信公众号使用百度地图JavaScript API功能


  共有2922人关注过本帖树形打印复制链接

主题：微信公众号使用百度地图JavaScript API功能
帅哥哟，离线，有人找我吗？
qwz405
 小大  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：二尾狐 帖子：522 积分：5027 威望：0 精华：0 注册：2015/4/15 15:25:00 		微信公众号使用百度地图JavaScript API功能  发帖心情 Post By：2018/5/19 17:19:00 [只看该作者]

已有坐标,是否可以在微信中调用百度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>
 回到顶部
帅哥哟，离线，有人找我吗？
有点甜
 小大  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：版主 帖子：85326 积分：427815 威望：0 精华：5 注册：2012/10/18 22:13:00 		  发帖心情 Post By：2018/5/20 22:14:00 [只看该作者]

嵌入css、js参考

 

http://www.foxtable.com/mobilehelp/scr/0061.htm

 

先把地图显示出来，固定坐标。如果要修改坐标，那写代码修改坐标位置即可。
 回到顶部
帅哥哟，离线，有人找我吗？
qwz405
 小大  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：二尾狐 帖子：522 积分：5027 威望：0 精华：0 注册：2015/4/15 15:25:00 		  发帖心情 Post By：2018/8/17 18:11:00 [只看该作者]

老师，目前的项目能达到的效果
 下载信息  [文件大小：   下载次数： ]
图片点击可在新窗口打开查看点击浏览该文件:地图项目.zip

图片点击可在新窗口打开查看此主题相关图片如下：目前效果.jpg
图片点击可在新窗口打开查看


1、如何将下图红圈代码放到项目中去？
2、自己的坐标如果修改？

图片点击可在新窗口打开查看此主题相关图片如下：百度代码.jpg
图片点击可在新窗口打开查看
[此贴子已经被作者于2018/8/17 18:13:28编辑过]
 回到顶部
帅哥哟，离线，有人找我吗？
有点蓝
 小大  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：超级版主 帖子：105948 积分：538809 威望：0 精华：9 注册：2015/6/24 9:21:00 		  发帖心情 Post By：2018/8/17 20:19:00 [只看该作者]

meta段不用理会

style样式看2楼帮助用法
 回到顶部
RSS2.0 | Xhtml无图版 | Xslt无图版 Copyright © 2000 - 2018 foxtable.com Tel: 4000-810-820 粤ICP备11091905号
   Powered By Dvbbs Version 8.3.0
页面执行时间 0.03906 秒, 5 次数据查询