【百度地图API】——国内首款团购网站的地图插件

原文:【百度地图API】——国内首款团购网站的地图插件

摘要:

  本文介绍了一款应用在团购网站上的地图插件,适用于目前非常流行的团购网站。使用这款地图插件,无需任何编程技术,你就把商家的位置轻松地标注在地图上。

前台地址

http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/user.html

后台地址

http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/admin.html

---------------------------------------------------------------------------------------------------------

团购网站地图插件使用说明:

前台用户浏览页面:

1、首先要在页面中放一个DOM容器

例如:

<div id="BAIDUMAPCONTENT"></div>

2、在页面的最下方(</body>后</html>前)加上下面的脚本

<script type="text/javascript">

//需要展示地图的元素ID

var BAIDUMAPCONTENT = "BAIDUMAPCONTENT";

//地图上需要展示的点信息

var BAIDUPOINTS = [{"name":"麻辣诱惑(十里堡店)新开张中新开张中","address":"北京市朝阳区十里堡甲3号都会国际A座2(华堂商场西)","tel":"(010)65579989","point":"116.510133,39.923652","citycode":131}];

</script>

<script type="text/javascript" src="http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/js/user.js"></script>

3、这时候浏览页面就会在页面上创建出一个小地图来

详细说明:

步骤2中,两个变量必须提供且名字不能改,值可以改;

var BAIDUMAPCONTENT = "BAIDUMAPCONTENT";

这个变量的值为1中DOM容器的ID,可以更改,但要跟DOM容器的ID保持一致,并且保证DOM容器存在

var BAIDUPOINTS = [{"name":"麻辣诱惑(十里堡店)新开张中新开张中","address":"北京市朝阳区十里堡甲3号都会国际A座2(华堂商场西)","tel":"(010)65579989","point":"116.510133,39.923652","citycode":131}];

这个变量的值的类型为数组,里面存放的是点对象(目前最多只能存放10个点对象)

点对象:

{
"name":"麻辣诱惑(十里堡店)新开张中新开张中", // 名称 必填

"address":"北京市朝阳区十里堡甲3号都会国际A座2(华堂商场西)", //地址 必填

"tel":"(010)65579989", //电话 选填

"point":"116.510133,39.923652", //坐标 必填

"citycode":131 //城市代码 必填

}

点对象中包括 name、address、tel、point、citycode 5个属性,其中 name 、address、point、citycode 4个属性是必填的,tel是选填的,如果4个必填属性中有一个值为空或不存在,那这个点,将不会标注在地图上显示

示例地址:

http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/user.html

-------------------------------------------------------------------------------------------------------------------------------

后台管理页面:

1、首先要在页面上放一个textarea元素和一个DOM容器

<textarea style="width:280px;" id="BAIDUMAPINFO">[{"name":"麻辣诱惑(十里堡店)新开张中新开张中","address":"北京市朝阳区十里堡甲3号都会国际A座2(华堂商场西)","tel":"(010)65579989"}]</textarea>;

<span id="BDMAPBUTTON"></span>

2、在页面的最下方(</body>后</html>前)加上下面的脚本

<script type="text/javascript">

var BAIDUMAPINFO = ‘BAIDUMAPINFO‘;//存放点信息的textarea的ID

var BDMAPBUTTON = ‘BDMAPBUTTON‘;//存放地图标注按钮的容器ID

</script>

<script type="text/javascript" src="http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/js/admin.js"></script>

3、这时候浏览页面就会在页面上创建出一个 小按钮,点击按钮会弹出个地图

详细说明:

步骤2中,两个变量必须提供且名字不能改,值可以改;

var BAIDUMAPINFO = ‘BAIDUMAPINFO‘;//存放点信息的textarea的ID

这个变量的值为1中textarea容器的ID,修改时需同时修改;

var BDMAPBUTTON = ‘BDMAPBUTTON‘;//存放地图标注按钮的容器ID

这个变量的值为1中DOM容器的ID,修改时需同时修改;

textarea中存放的是一个数组,数组中存放的是点对象(目前最多只能存放10个点对象)

点对象:

{

"name":"麻辣诱惑(十里堡店)新开张中新开张中", // 名称 必填

"address":"北京市朝阳区十里堡甲3号都会国际A座2(华堂商场西)", //地址 必填

"tel":"(010)65579989", //电话 选填

"point":"116.510133,39.923652", //坐标 选填 没有时会根据 地址(address)自动生成

"citycode":131 //城市代码 选填 没有时会根据 地址(address)自动生成

}

点对象中包括 name、address、tel、point、citycode 5个属性,其中 name 、address 2个属性是必填的,tel、point、citycode是选填的,如果2个必填属性中有一个值为空或不存在,那这个点,将不会标注在地图上显示和编辑,point、citycode 2个属性如果不存在时,会根据地址(address)自动生成出来

point、citycode 2个属性生成说明:如果这两个属性存在时,则直接读取使用,如果不存在会自动生成出来,当查看完地图,关闭地图时会将textarea的值用重新生成后的内容替换掉

如何修改点坐标:

打开地图后,地图会自动将符合条件的点显示在地图上,点击左侧的 详情 会将该条信息在地图上对应的点的气泡打开,用鼠标左键按住气泡下方的 Marker (有A、B、C、D、E、F、G、H、I、J显示的元素)移动,就可以改变改点的坐标,移动完成后,点击左侧列表中改点对应的信息框中的 确定 按钮,该点坐标就修改成功了,如果想取消移动,点击 对应的 取消 按钮 就可以了

示例地址:

http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/admin.html

----------------------------------------------------------------------------------------------------------

前台页面的图示:

时间: 2024-10-31 06:02:12

【百度地图API】——国内首款团购网站的地图插件的相关文章

国内首款999元的高性能3D打印机面世

随着3D打印机技术越来越成熟,吸引了很多有兴趣的朋友关注,不知道大家最近有没有留意到,最近由国内WeiBao团队带来一款售价只要999元的国产WeiBao多功能3D打印机,只要对3D打印机有所了解的人很容易被吸引,不到1000元无疑是一个意想不到的低价了. 上图是WeiBao多功能3D打印机的样机,再来看看打印机的功能,这款威宝多功能3D打印机基于Rostock的新型设计,使用并联机械臂结构本身,可使用PLA.ABS耗材.它能打印食品,并且能在几分钟内变成了一台数控机床(CNC),或者激光切割机

【百度地图API】如何制作一张魔兽地图!!——CS地图也可以,哈哈哈

原文:[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 摘要: 你玩魔兽不?你知道如何做一张魔兽地图不?! 快来看此文吧! --------------------------------------------- 一.制作魔兽地图的准备工作 其实,你只需要准备一些地图的瓦片图,就可以了. 用切片工具,把一张完整的图片(最好大一些,清楚一些),切成小片.(下周我贴这个工具的下载链接出来.留个悬念,哈哈.) 正式公布切图工具链接: http://openapi.baidu.co

2017高德地图API WEB开发(key申请,地图搭建)简约教程

前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去"高德地图开发平台" 通过"百度搜索 "或者"谷歌搜索 " 高德地图然后会有一个高德开发平台|高德地图apl 2.登录高德开发平台 这是高德开发平台的官网,然后点击登录,没有注册就好 3.进入控制台创建新应用 进入控制台之后选择"应用管理"然后点

Android 百度地图API 定位 导航

看看这个利用百度地图定位并实现目的地导航的Demo.首先看实现效果:                          进 入后首先会得到当前位置,在地图上显示出来,在输入框中输入目的地后,就会在地图上出现最佳线路,我这里设置的是距离最小的驾车线路,另外还有公交线路. 步行线路,在代码中都有详细注释.另外,在控制台还输出了线路上每一个节点的信息以及起始位置和目的地的距离,信息显示的是在当前节点的导航信息.如下 图: 接下来就看如何实现了,首先,注册百度开发者账号,并进入百度地图API查看相关资料

百度地图API:利用瓦片生成工具,自定义背景图片

参考酸奶小妹的博文<[百度地图API]如何制作一张魔兽地图!!——CS地图也可以,哈哈哈> (http://www.cnblogs.com/milkmap/archive/2011/05/27/2060021.html). 及博文 <百度地图:新的瓦片生成工具来了> 链接:http://blog.csdn.net/bq_cui/article/details/9396703,开发的工具下载地址:http://blog.csdn.net/bq_cui/article/details/

百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:

原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和DOM编程里的事件模型一样,百度地图API也提供了类似的事件机制.本文介绍了事件监听的添加和移除方法,this指针和事件参数的使用以及绑定事件监听函数中涉及的闭包问题,最后分享了一个用来增强地图API事件机制的开源项目. 事件添加和移除 我们最简单的事件开始,下面的代码示例给map对象添加了click事件的监听

【百度地图API】手机浏览器抓包工具及其使用方法

原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. ------------------------------------------------------ 一.手机浏览器抓包工具 Paros 3.2.13 二.如何配置 1.将电脑和手机连到同一个wifi环境中 2.找到电脑的IP 可以点击网卡图标,找到IP信息 也可以在cmd下,使用ipconfi

中国首款嵌入式神经网络处理器发布

中国首款嵌入式神经网络处理器(NPU)芯片在北京正式发布,该芯片颠覆传统计算机架构,是由中星微“数字多媒体芯片技术”国家重点实验室研发,已于今年3月6日实现量产. 据介绍,有别于传统的冯诺依曼计算机架构,NPU采用了“数据驱动并行计算”架构,其具有低功耗的特点,擅长视频.图像类的多媒体数据处理,有助于人工智能在嵌入式机器视觉应用中稳定发挥. 中星微日前展示了型号为VC0758的国内首款NPU芯片产品,其内部集成了四个NPU内核,同时其还集成了[email protected]的SVAC国家标准音

Google地图API

使用谷歌地图API V3创建交互式地图,分两个步骤来说明,第一是准备工作,第二是如何调用接口进行Google地图的展示. 1. 准备工作 如果想调用Google地图的接口,首先需要拥有一个免费的 Google 地图 API key.想要拥有一个免费的API Key,首先得拥有一个Google账号.想要申请Google的账号,首先得能访问Google的网站注册Gmail.目前在大陆已经很难访问Google的网站了,怎么访问Google的网站不是这里的重点,假设你已经能够访问Google的网站,并且