百度地图 php,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数据
var products_json = {$products_json};
// 百度地图
var citymap = new citymap(products_json,'宿迁');
3.处理地图
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+js实现百度地图多点标注的方法相关推荐
- 移动端百度地图多点标注php,PHP学习:php+js实现百度地图多点标注的方法
<PHP学习:php+js实现百度地图多点标注的方法>要点: 本文介绍了PHP学习:php+js实现百度地图多点标注的方法,希望对您有用.如果有疑问,可以联系我们. PHP教程 PHP教程 ...
- 移动端百度地图多点标注php,php+js实现百度地图多点标注的方法【第1/2页】
1.php创建json数据$products = $this->product_db->select($where); $products_json = json_encode($prod ...
- 中国分省份像素地图(HTML+JS 轻量级实现地图数据展示)
中国分省份像素地图 想法由来 先看效果(东三省) 实现过程 ps上画个大概 看着这个图,编制js数据 HTML + JS 代码 相关数据文件 人口数据文件 data.js 像素描述文件:chinapi ...
- 【百度地图API】JS版本的常见问题
1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...
- 震惊——JS中百度地图开放平台API尽然是这样使用
百度地图js--API使用 基本使用 引用百度API资源 <!--引用资源--> <!--百度地图基础API--> <script type="text/jav ...
- 前端(1)js:百度地图api使用
(1)百度地图API链接 1)获取key http://lbsyun.baidu.com/apiconsole/key 2)查看相关API文档 http://lbsyun.baidu.com/inde ...
- 百度地图根据经纬度计算距离php,详解js根据百度地图提供经纬度计算两点距离...
正常在使用百度地图时,我们可以通过BMap的实例对象提供的方法计算距离: var map = new BMap.Map('map_canvas'); map.getDistance(point1 ,p ...
- heatmap.js调用百度地图api做热力图
做热力图使用heatmap.js模块然后就是来挑用百度地图api是他展现在百度地图上面 一首先你要申请一个百度地图api接口的密钥 申请网址 申请密钥之后,先登录上自己的账号然后创建应用 三就是来取一 ...
- 其他地图坐标点在百度地图展示位置偏差较大--js开发百度地图服务类-Convertor
做所有操作之前,应先引入百度地图开发的js文件 <script type="text/javascript"src="http://api.map.baidu.co ...
最新文章
- XOOM MZ606 刷机
- 7 1学会使用 Node 编写简单的前端应用
- Redis面试题答案整理
- Oracle Discover产品简介
- 关于spring MVC中加载多个validator的方法。
- daoi php_使用php生成RSA公钥私钥及进行加密解密和签名验证
- ajax存储单个数据_科学家现在可以使用单个原子存储数据
- ps清理原始数据程序_ps重要插件ACR最新版 让处理照片更简便 详尽说明附上 抓紧下载吧...
- 如何成为一名更出色的开发者?
- 合规不利于安全的五种情形
- Bitvise Tunnelier 安装教程及报错处理
- 5G NR — 基站(Base Station)
- python实现嗅探
- 小女子菜鸟一枚,因本科毕业设计第一次接触安卓开发……图片上传问题求教
- SMTP 协议邮件发送工具封装
- ubuntu启动报错kernel panic
- Python — 文字输出乱码
- win10操作系统如何把用户名改成英文的
- ul、li显示图片标记
- 【操作系统】SMP vs NUMA vs MPP 架构简介