博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【百度地图API】——国内首款团购网站的地图插件
阅读量:6638 次
发布时间:2019-06-25

本文共 3326 字,大约阅读时间需要 11 分钟。

原文:

摘要:

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

img_b85e84217cc84c15b759d764bc8d1bdd.jpg

前台地址

 

后台地址

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

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

前台用户浏览页面: 

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个必填属性中有一个值为空或不存在,那这个点,将不会标注在地图上显示

示例地址: 

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

后台管理页面:

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显示的元素)移动,就可以改变改点的坐标,移动完成后,点击左侧列表中改点对应的信息框中的 确定 按钮,该点坐标就修改成功了,如果想取消移动,点击 对应的 取消 按钮 就可以了

示例地址:

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

前台页面的图示:

img_884562c6ae174a05f829d80e95df7fc5.jpg

转载地址:http://mnpvo.baihongyu.com/

你可能感兴趣的文章
通过XML设置屏幕方向(android:screenOrientation)详解
查看>>
linux系统实践之十六:linux修改系统时间详解 [转]
查看>>
Tomcat Configuration Using CATALINA_BASE
查看>>
《伟大是熬出来的》冯仑与年轻人闲话人生之三
查看>>
Asp.Net_Mvc_View
查看>>
IOS-2016年最好的15个Web设计和开发工具
查看>>
写一个自己定义进度颜色和圆形转动的ProgressBar(具体介绍)
查看>>
Android aidl Binder框架浅析
查看>>
cpu_relax( )-----对自选循环等待(spin-wait loops)操作的优化【转】
查看>>
dmesg 程序崩溃调试
查看>>
ios UIView常用动画效果
查看>>
Arduino舵机控制
查看>>
使用php脚本查看已开启的扩展
查看>>
C和C++混合编程(__cplusplus 与 external "c" 的使用)
查看>>
页面返回顶部的方法总结
查看>>
cug oj 1479 Treasure Chest Lock (区间dp 思维)
查看>>
LeetCode11:Container With Most Water
查看>>
【项目 部署】部署项目web context root,项目跟路径跟项目实际名称不符
查看>>
一致性hash算法在memcached中的使用
查看>>
史上最全的maven的pom.xml文件详解
查看>>