这里有新鲜出炉的PHP设计模式,程序狗速度看过来!
PHP(外文名: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,入门门槛较低,易于学习,使用广泛,主要适用于web开发领域。PHP的文件后缀名为php。
这篇文章主要介绍了php+js实现百度地图多点标注的方法,涉及php结合js针对百度地图接口调用与json操作相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
来源: http://www.phperz.com/article/17/0902/340988.html