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 25 PHP
PHP获取当前完整URL地址的函数
Dec 21 PHP
php截取指定2个字符之间字符串的方法
Apr 15 PHP
PHP制作用户注册系统
Oct 23 PHP
smarty的section嵌套循环用法示例
May 28 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
Feb 04 PHP
php输出图像的方法实例分析
Feb 16 PHP
PHP实现活动人选抽奖功能
Apr 19 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
Jun 09 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
Jul 03 PHP
PHP __call()方法实现委托示例
May 20 PHP
PHP大文件切割上传并带进度条功能示例
Jul 01 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
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
2014国庆节标语口号
2014/09/19 职场文书
给医院的感谢信
2015/01/21 职场文书
八一建军节慰问信
2015/02/14 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js