百度地图多点标注实现

简介:

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();
}


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5802290.html,如需转载请自行联系原作者
相关文章
|
7月前
|
定位技术 Android开发
在高德地图添加标注物,及点击标注物感应区域重叠问题
在高德地图添加标注物,及点击标注物感应区域重叠问题
220 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
321 0
|
数据可视化 物联网
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
960 15
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
|
7月前
|
前端开发 定位技术
前端知识笔记(十七)———地图多点标注功能
前端知识笔记(十七)———地图多点标注功能
152 1
|
小程序 定位技术
微信小程序如何实现地图多点标注
微信小程序如何实现地图多点标注
824 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图弧线连接线标注
地图开发实战案例:高德地图弧线连接线标注
153 0
|
JSON 定位技术 API
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
301 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
155 0
|
定位技术
高德地图根据接口多点标记
高德地图根据接口多点标记
101 0
|
安全 定位技术 开发者
(可直接复制使用)vue2+高德地图poi搜索和高德组件,可以地图选点,经纬度,比例尺,卫星图,路网,路况等等
(可直接复制使用)vue2+高德地图poi搜索和高德组件,可以地图选点,经纬度,比例尺,卫星图,路网,路况等等
641 0
(可直接复制使用)vue2+高德地图poi搜索和高德组件,可以地图选点,经纬度,比例尺,卫星图,路网,路况等等