zoukankan      html  css  js  c++  java
  • 百度地图自己添加 标识地点 代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body, html { 100%;height: 100%;margin:0;font-family:"微软雅黑";}
            #allmap{100%;height:500px;}
            p{margin-left:5px; font-size:14px;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eniNDkjbZhqB4Ro7MkEO15p3"></script>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <title>给多个点添加信息窗口</title>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
        // 百度地图API功能    
        map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(108.707509,34.345373), 15);
        map.enableScrollWheelZoom(true);
        map.disableDragging();     //禁止拖拽
        setTimeout(function(){
           map.enableDragging();   //两秒后开启拖拽
           //map.enableInertialDragging();   //两秒后开启惯性拖拽
        }, 2000);
        var data_info = [
                         [108.706808,34.374272,"地址:北京市东城区王府井大街88号乐天银泰百货八层"],
                         [108.702128,34.374119,"地址:北京市东城区东华门大街"],
                         [108.701562,34.372056,"地址:北京市东城区正义路甲5号"],
                         [108.70997,34.374395,"地址:111111111111"]
                        ];
        var opts = {
                    width : 250,     // 信息窗口宽度
                    height: 80,     // 信息窗口高度
                    title : "信息窗口" , // 信息窗口标题
                    enableMessage:true//设置允许信息窗发送短息
                   };
        for(var i=0;i<data_info.length;i++){
            var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
            var content = data_info[i][2];
            map.addOverlay(marker);               // 将标注添加到地图中
            addClickHandler(content,marker);
        }
        function addClickHandler(content,marker){
            marker.addEventListener("click",function(e){
                openInfo(content,e)}
            );
        }
        function openInfo(content,e){
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
            map.openInfoWindow(infoWindow,point); //开启信息窗口
        }
    </script>

    原文地址:http://www.cnblogs.com/xinlinux/p/4398667.html

  • 相关阅读:
    Coursera self-driving2, State Estimation and Localization Week2, kalman filter 卡尔曼滤波
    Coursera Self-driving1, introduction
    Coursera, Big Data 5, Graph Analytics for Big Data, Week 5
    初创电商公司Drop的数据湖实践
    什么是LakeHouse?
    Apache Hudi 0.5.1版本重磅发布
    Apache Hudi使用问题汇总(一)
    ApacheHudi常见问题汇总
    写入Apache Hudi数据集
    Hudi基本概念
  • 原文地址:https://www.cnblogs.com/xinlinux/p/4398667.html
Copyright © 2011-2022 走看看