移动端百度地图多点标注php,PHP学习:php+js实现百度地图多点标注的方法
《PHP学习:php+js实现百度地图多点标注的方法》要点:
本文介绍了PHP学习:php+js实现百度地图多点标注的方法,希望对您有用。如果有疑问,可以联系我们。
PHP教程
PHP教程1.php创建json数据
PHP教程
$products = $this->product_db->select($where);
$products_json = json_encode($products);
PHP教程2.js传入json数据
PHP教程类似于这样的结构
PHP教程
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"
}];
PHP教程js擅长处理json数据
PHP教程
var products_json = {$products_json};
// 百度地图
var citymap = new citymap(products_json,'宿迁');
PHP教程3.处理地图
PHP教程
document.write('');
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 = '
';
//pop弹窗信息
var html = [];
html.push('
html.push('
');
html.push('
地址:');
html.push('
' + pro.address + ' ');
html.push('
');
html.push('
');
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相关内容感兴趣的读者可查看本站专题:《php curl用法总结》、《PHP数组(Array)操作技巧大全》、《php排序算法总结》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》、《PHP数学运算技巧总结》、《php正则表达式用法总结》、《PHP运算与运算符用法总结》、《php字符串(string)用法总结》及《php常见数据库操作技巧汇总》
PHP教程希望本文所述对大家PHP程序设计有所帮助.
移动端百度地图多点标注php,PHP学习:php+js实现百度地图多点标注的方法相关推荐
- 百度地图 php,php+js实现百度地图多点标注的方法
本文实例讲述了php+js实现百度地图多点标注的方法.分享给大家供大家参考,具体如下: 1.php创建json数据 $products = $this->product_db->selec ...
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注...
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注 ...
- js调用百度地图API,实现地图标注位置
直接调用js就可以,通过设置中心位置来实现显示的中心确定,入图中的小括号:通过标注坐标来在地图中显示你自己的位置,如图"青岛农业大学"标注: 效果图如下: 代码如下: <di ...
- 移动端调用电话、短信、唤起QQ和使用百度地图
H5能很方便地实现这些功能,都是一句代码搞定 调用电话 <a href="tel:12345678"> 短信 <a href='sms:12345678'> ...
- 【安卓学习之常见问题】百度地图卫星地图精度不够
█ [安卓学习之常见问题]百度地图卫星地图精度不够 █ 系列文章目录 提示:这里是收集了和文件分享有关的文章 [安卓学习之常见问题]android路径及文件问题 [安卓学习之常见问题]文件分享–文件不 ...
- H5使用百度地图SDK获取用户当前位置并且标记显示在地图
代码实现功能: H5使用百度地图SDK获取用户当前位置并且标记显示在地图,点击该标记弹出一层自定义的HTML. 效果图: 代码: <!DOCTYPE html> <html>& ...
- baidumaptrace.php,GitHub - SignalLine/BaiduMapTrace: 百度地图运动轨迹纠偏、去噪、绑路之百度鹰眼sdk服务...
BaiduMapTrace 百度地图运动轨迹纠偏.去噪.绑路之百度鹰眼sdk服务 轨迹大致能反应用户所经过的路劲,效果还是不错的,说明gps信号较好,精度较高. 但是除了西边的轨迹较为平滑之外,其他方 ...
- 前端(1)js:百度地图api使用
(1)百度地图API链接 1)获取key http://lbsyun.baidu.com/apiconsole/key 2)查看相关API文档 http://lbsyun.baidu.com/inde ...
最新文章
- 用XML反序列化快速完成ASP.NET配置文件
- pythreejs is needed for plotting with pythreejs backend
- Web开发-Django初识及实战
- javafx 遮罩_JavaFX技巧31:遮罩/剪切/ Alpha通道
- 卷积神经网络-目标探测
- Pandas DataFrame 取消科学计数法打印
- 使用Hash函数和MAC产生伪随机数
- CFA在线计算机,注意!CFA考场上只能携带这种计算机!
- 双向lstm-crf源码的问题和细微修改
- C语言向文件写入学生信息并读取显示出来
- 利用InVEST模型的生境质量模块计算生境质量
- 提高 Mac OS X 速度的 52 个方法
- win7下ACE+TAO环境搭建
- php 属猪,属猪人的流年运程
- 徐荣谦《养好脾和肺 宝宝不积食不咳嗽长大个》【01】小儿常见病
- 深入理解Java虚拟机——运行时栈帧结构(局部变量表)
- 网桥是怎么分类的?具体有哪些分类?
- 文章翻译:Recommending items to more than a billion people(面向十亿级用户的推荐系统)...
- 开发通用资料——英文缩写
- Orin 调试GMSL camera遇到问题之MIPI CSI2 报文解析
热门文章
- html信息代码是什么意思,这句html代码是什么意思?
- SD卡烧录镜像后插电脑不显示问题
- js效果需要刷新页面才生效
- 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-4.跨域且传输数据,并优化后端接口
- “强迫症头像”蹿红,还需谨防病毒入侵
- 孔 孟 颜 曾四姓通天谱(孔、孟、颜、曾、卜、闵、冉)
- 如何给X86的安卓机刷机(联想乐檬K80M)(线刷)
- pymysql的列名传参
- Smobiler 仿美柚APP个人主页
- killall 命令终止进程用法