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 22 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
Sep 24 PHP
php 目录与文件处理-郑阿奇(续)
Jul 04 PHP
PHP中用hash实现的数组
Jul 17 PHP
Linux下创建nginx脚本-start、stop、reload…
Aug 03 PHP
thinkphp模板用法和内容输出实例
Nov 28 PHP
抛弃 PHP 代价太高
Apr 26 PHP
php+mysql实现的二级联动菜单效果详解
May 10 PHP
php Session无效分析资料整理
Nov 29 PHP
PHP的mysqli_stat()函数讲解
Jan 23 PHP
PHP随机数函数rand()与mt_rand()的讲解
Mar 25 PHP
php多进程并发编程防止出现僵尸进程的方法分析
Feb 28 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
laravel自定义分页效果
2017/07/23 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
js的回调函数详解
2015/01/05 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
解决uWSGI的编码问题详解
2017/03/24 Python
import的本质解析
2017/10/30 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
小学班主任寄语大全
2014/04/04 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
补充协议书
2015/01/28 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
思品教学工作总结
2015/08/10 职场文书
Python Pandas 删除列操作
2022/03/16 Python