zoukankan      html  css  js  c++  java
  • 百度地图API的第一次接触——标注和信息窗的使用

    1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口

        function addMarker(point, 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);
                           
          marker.addEventListener("click", function(){         // 标注点击事件监听
                              
               var opts = {
                                      
                   width : 250,     // 信息窗口宽度
                                      
                   height: 120,     // 信息窗口高度
                                      
                   title : "InfoWindow"  // 信息窗口标题
                                      
          }
                                      
          var infoWindow = new BMap.InfoWindow("Hello World!", opts);  // 创建信息窗口对象
                                      
          map.openInfoWindow(infoWindow, point);      // 在标注处打开信息窗口
    
                              
         });
    
                          
     }

    2.随机在地图内生成5个标注

        var bounds = map.getBounds();  //获得地图边界
                          
      
    var lngSpan = bounds.maxX - bounds.minX; var latSpan = bounds.maxY - bounds.minY; for (var i = 0; i < 5; i ++) { var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),bounds.minY + latSpan * (Math.random() * 0.7 + 0.15)); //在地图范围内随机生成点 addMarker(point, i);//调用1中js函数 }

    3.打开浏览器看效果

  • 相关阅读:
    AC自动机【学习笔记】
    SCOI2016 背单词【Trie树,贪心】
    【字符串算法】字典树Trie入门
    USACO 1.3 Name That Number【暴搜】
    MapReduce分组
    MapReduce排序
    博客园添加访问人数统计
    MapReduce的分区
    MapReduce的计数器
    MapReduce部分源码解读(一)
  • 原文地址:https://www.cnblogs.com/TomSnail/p/4352806.html
Copyright © 2011-2022 走看看