zoukankan      html  css  js  c++  java
  • 百度地图,创建标点

       引用一个地图的网络路径

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥1g1fQ88FPyxtTBZakPQzIqPRVf1ZrSEq"></script>

    页面放一个div即可

    <div id="ditu">
       </div>

    页面加载完成后一个执行一个函数

    $(function(){

      newMap()

    })

    function newMap(){
        //创建地图实例
        var map = new BMap.Map("ditu");
        //设置中心点坐标
        var point = new BMap.Point(118.051324, 36.797857);
        //根据中心点和层级显示地图
        map.centerAndZoom(point, 15);
        //设置显示城市
        map.setCurrentCity("淄博");  
        //设置滚轮缩放
        map.enableScrollWheelZoom();
        //禁用双击放大
        map.disableDoubleClickZoom();
        addMarker(map);
    }
    /*功能:双击时添加一个标注*/
    function addMarker(map){
        //定义一个数组,保存点击的点的经纬度
        var pointArr = [];
        map.addEventListener("dblclick",function(e){
            //获取当前点击点的经纬度,在此位置添加标注
            var nowPoint = new BMap.Point(parseFloat(e.point.lng),parseFloat(e.point.lat));
            //console.log(nowPoint);
            //将本次点击的经纬度追加进数组
            pointArr.push(nowPoint);
            //console.log(pointArr);
            //设置标注图标
            var myIcon = new BMap.Icon("../../resouse/img/10.dingweishen/8.png",new BMap.Size(36, 36),{anchor: new BMap.Size(10, 35)});
            //创建标注
            var marker = new BMap.Marker(nowPoint,{icon:myIcon});
            //将标注添加到地图中
            map.addOverlay(marker);
            //设置标注信息及文本
            var opts = {
                width : 150,     // 信息窗口宽度
                height: 60,     // 信息窗口高度
                title : "海底捞王府井店" , // 信息窗口标题
                enableMessage:true,//设置允许信息窗发送短息
                message:"亲耐滴,晚上一起吃个饭吧?戳下面的链接看下地址喔~"
            };
            var infoWindow = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
            marker.addEventListener("click", function(){          
                map.openInfoWindow(infoWindow,nowPoint); //开启信息窗口
            });
            //设置的标注点可以拖拽
            //marker.enableDragging();
            //根据点显示折线:pointArr--点的数组。折线的颜色,折线的宽度,折线的透明度
            var polyline = new BMap.Polyline(pointArr,{strokeColor:"black", strokeWeight:2, strokeOpacity:0.5});
            //将点连成线
            map.addOverlay(polyline);
        });
    }

  • 相关阅读:
    1-1-折纸问题
    调整数组顺序使奇数位于偶数前面
    在O(1)时间删除链表结点
    打印1到最大的n位数
    数值的整数次方
    二进制中1的个数
    变态跳台阶
    旋转数组的最小数字
    用两个栈实现队列
    Swift学习笔记(5):集合类型
  • 原文地址:https://www.cnblogs.com/baobaoa/p/9113759.html
Copyright © 2011-2022 走看看