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


Posted in PHP onNovember 30, 2016

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

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

1.php创建json数据

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

2.js传入json数据

类似于这样的结构

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数据

<script>
var products_json = {$products_json};
// 百度地图
var citymap = new citymap(products_json,'宿迁');
</script>

3.处理地图

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 相关文章推荐
可以在线执行PHP代码包装修正版
Mar 15 PHP
php中设置index.php文件为只读的方法
Feb 06 PHP
php使用qr生成二维码的示例分享
Jan 20 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
Aug 21 PHP
详解PHP导入导出CSV文件
Nov 03 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
Nov 18 PHP
php中使用url传递数组的方法
Feb 11 PHP
Yii2下session跨域名共存的解决方案
Feb 04 PHP
PHP中trait使用方法详细介绍
May 21 PHP
php+croppic.js实现剪切上传图片功能
Aug 14 PHP
PHP实现负载均衡的加权轮询方法分析
Aug 22 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
Oct 12 PHP
php 运算符与表达式详细介绍
Nov 30 #PHP
PHP AjaxForm提交图片上传并显示图片源码
Nov 29 #PHP
php判断是否为ajax请求的方法
Nov 29 #PHP
PHP判断文件是否被引入的方法get_included_files用法示例
Nov 29 #PHP
php获取开始与结束日期之间所有日期的方法
Nov 29 #PHP
PHP精确计算功能示例
Nov 29 #PHP
PHP 搜索查询功能实现
Nov 29 #PHP
You might like
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
python实现梯度法 python最速下降法
2020/03/24 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
橄榄树药房:OLIVEDA
2019/09/01 全球购物
信息总监管理职责范本
2014/03/08 职场文书
关于安全的标语
2014/06/10 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
八年级物理教学反思
2016/02/19 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python