1. 全栈程序员必看首页

php+js实现百度地图多点标注的方法

全栈程序员-站长 • • 未分类 • 阅读 37

php+js实现百度地图多点标注的方法

本文实例讲述了php+js实现百度地图多点标注的方法。分享给大家供大家参考，具体如下：

php+js实现百度地图多点标注的方法

1.php创建json数据

?
1
2
$products
=
$this
->product_db->select(
$where
);
$products_json
= json_encode(
$products
);

2.js传入json数据

类似于这样的结构

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var
markerArr = [{
  
title:
"名称：广州火车站"
,
  
point:
"113.264531,23.157003"
,
  
address:
"广东省广州市广州火车站"
,
  
tel:
"12306"
}, {
  
title:
"名称：广州塔（赤岗塔）"
,
  
point:
"113.330934,23.113401"
,
  
address:
"广东省广州市广州塔（赤岗塔） "
,
  
tel:
"18500000000"
}, {
  
title:
"名称：广州动物园"
,
  
point:
"113.312213,23.147267"
,
  
address:
"广东省广州市广州动物园"
,
  
tel:
"18500000000"
}, {
  
title:
"名称：天河公园"
,
  
point:
"113.372867,23.134274"
,
  
address:
"广东省广州市天河公园"
,
  
tel:
"18500000000"
}];

js擅长处理json数据

?
1
2
3
4
5
<script>
var
products_json = {$products_json};
// 百度地图
var
citymap =
new
citymap(products_json,
'宿迁'
);
</script>

3.处理地图

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
document.write(
'<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1We8imivxZnaKMujZIrlDZ0v"></script>'
);
function
citymap(markerArr, cityName){
  
this
.markerArr = markerArr;
  
this
.cityName = cityName;
  
this
.initMap =
function
() {
    
this
.createMap();
//创建地图
    
this
.setMapEvent();
//设置地图事件
    
this
.addMapControl();
//向地图添加控件
  
};
  
this
.createMap =
function
() {
    
var
map =
new
BMap.Map(
"dituContent"
);
//在百度地图容器中创建一个地图
    
map.centerAndZoom(cityName,
'13'
);
    
window.map = map;
//将map变量存储在全局
    
// 绘制点
    
for
(
var
i = 0; i < markerArr.length; i++) {
      
var
p0 = markerArr[i].baidu_lng;
      
var
p1 = markerArr[i].baidu_lat;
      
var
maker =
this
.addMarker(
new
window.BMap.Point(p0, p1),markerArr[i],i );
      
this
.addInfoWindow(maker, markerArr[i], i);
    
}
  
};
  
this
.addMarker =
function
(point,pro,index) {
    
var
myIcon =
new
BMap.Icon(
"http://api.map.baidu.com/img/markers.png"
,
      
new
BMap.Size(23, 25), {
        
offset:
new
BMap.Size(10, 25),
        
imageOffset:
new
BMap.Size(0, 0 - index * 25)
      
});
    
var
marker =
new
BMap.Marker(point, {
      
icon: myIcon
    
});
    
map.addOverlay(marker);
    
var
label =
new
BMap.Label(pro.name,{offset:
new
BMap.Size(20,-10)});
    
// 设置label样式
    
label.setStyle({
      
color :
"#CC3333"
,
      
fontSize :
"13px"
,
      
backgroundColor :
"#CCFFFF"
,
      
border :
"0"
,
      
fontWeight :
"bold"
    
});
    
marker.setLabel(label);
    
return
marker;
  
};
  
this
.addInfoWindow =
function
(marker,pro) {
    
//pop弹窗标题
    
var
title =
'<div style="font-weight:bold;color:#CE5521;font-size:14px"><a href="?m=home&c=product&id='
+ pro.id +
'">'
+ pro.name +
'</a></div>'
;
    
//pop弹窗信息
    
var
html = [];
    
html.push(
'<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'
);
    
html.push(
'<tr>'
);
    
html.push(
'<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>'
);
    
html.push(
'<td style="vertical-align:top;line-height:16px">'
+ pro.address +
' </td>'
);
    
html.push(
'</tr>'
);
    
html.push(
'</tbody></table>'
);
    
var
infoWindow =
new
BMap.InfoWindow(html.join(
""
), {
      
title: title,
      
width: 200
    
});
    
var
openInfoWinFun =
function
() {
      
marker.openInfoWindow(infoWindow);
    
};
    
marker.addEventListener(
"click"
, openInfoWinFun);
    
return
openInfoWinFun;
  
}
  
this
.setMapEvent =
function
() {
    
map.enableDragging();
//启用地图拖拽事件，默认启用(可不写)
    
// map.enableScrollWheelZoom();//启用地图滚轮放大缩小
    
map.enableDoubleClickZoom();
//启用鼠标双击放大，默认启用(可不写)
    
map.enableKeyboard();
//启用键盘上下左右键移动地图
  
};
  
this
.addMapControl =
function
() {
    
//向地图中添加缩放控件
    
var
ctrl_nav =
new
BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
    
map.addControl(ctrl_nav);
      
//向地图中添加缩略图控件
    
var
ctrl_ove =
new
BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
    
map.addControl(ctrl_ove);
      
//向地图中添加比例尺控件
    
var
ctrl_sca =
new
BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
    
map.addControl(ctrl_sca);
  
};
  
this
.initMap();
}

更多关于PHP相关内容感兴趣的读者可查看本站专题：《php curl用法总结》、《PHP数组(Array)操作技巧大全》、《php排序算法总结》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》、《PHP数学运算技巧总结》、《php正则表达式用法总结》、《PHP运算与运算符用法总结》、《php字符串(string)用法总结》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/112797.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 音视频传输基本知识[通俗易懂]

    音视频传输基本知识[通俗易懂]

    音视频传输基本知识[通俗易懂]音视频传输时的基本步骤：1.发起会话（Sip协议）2.编码（硬件编码、软件编码）3.传输（RTP）4.解码（硬件解码、软件解码）5结束会话（Sip协议）视频格式视频格式可以分为适合本地播放的本地影像视频和适合在网络中播放的网络流媒体影像视频两大类。尽管后者在播放的稳定性和播放画面质量上可能没有前者优秀，但网络流媒体影像视频的广泛传播性使之正被广泛应用于视频点播、网络演示

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月3日
    0
  • IntelliJ IDEA全局内容搜索和替换 idea

    IntelliJ IDEA全局内容搜索和替换

    IntelliJ IDEA全局内容搜索和替换在做项目时，有时会在整个项目里或指定文件夹下进行全局搜索和替换，这是一个很方便功能。使用方法如下：一、全局搜索1、使用快捷键Ctrl+Shift+F打开搜索窗口，或者通过点击Edit–>Find–>Findinpath打开搜索窗口，如下图：2、搜索界面如下，主要分为上中下三部分，上部主要为搜索条件(要搜索的内容、范围、方式等)，中间部分为包含搜索内容的文件列表，点击单个文件可以在下面部分

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月25日
    52
  • <span>面试官问我redis数据类型，我回答了8种</span>

    面试官问我redis数据类型，我回答了8种

    面试官问我redis数据类型，我回答了8种

    全栈程序员-站长的头像 全栈程序员-站长
    2020年11月20日
    190
  • android换苹果,苹果换手机怎么转移数据？苹果、安卓都可以一键转移数据[通俗易懂]

    android换苹果,苹果换手机怎么转移数据？苹果、安卓都可以一键转移数据[通俗易懂]

    android换苹果,苹果换手机怎么转移数据？苹果、安卓都可以一键转移数据[通俗易懂]原标题：苹果换手机怎么转移数据？苹果、安卓都可以一键转移数据要更换手机的话，旧手机上的数据怎么办还真的是一个难题啊，毕竟手机用久了，上面的有各种重要的数据不是。那苹果手机换机的话，将数据进行转移，可以分成两种情况，一种吧，就是苹果转苹果，一种就是苹果转安卓了。一、苹果手机数据转移到新iPhone1、借助iCloud云备份手机自带的云备份功能，肯定是可以用上的。①手机连接上WiFi，然后在手机“设置…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月26日
    74
  • 远程连接oracle01017,sqlplus远程sys用户登录ora 01017的解决方法

    远程连接oracle01017,sqlplus远程sys用户登录ora 01017的解决方法

    远程连接oracle01017,sqlplus远程sys用户登录ora 01017的解决方法UsingORAPWDWhenyouinvokethispasswordfilecreationutilitywithoutsupplyinganyparameters,youreceiveamessageindicatingtheproperuseofthecommandasshowninthefollowingsampleoutput…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月1日
    33
  • java类加载过程详解_java三个类加载器

    java类加载过程详解_java三个类加载器

    java类加载过程详解_java三个类加载器朋友给我发了一道有意思的题目，如下为什么用.class的方式加载类和以Class.forName()的方式加载的结果不同呢，原因很简单，就是类加载过程的不同。这就扯到基础理解上了，就是Java是如何加载一个类的呢？上图是我绘制的整个Java类加载过程。首先是编译期，将Java源文件也就是敲好的代码通过编译，转换成.class文件，也就是字节码文件（byte），然后经过传输传…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月11日
    7

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号