• 百度地图api实例


    <div id="allmap"></div>
    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    
    <script type="text/javascript">
    var map = new BMap.Map("allmap");
        var point = new BMap.Point(113.663941,34.805986);//坐标
        var marker = new BMap.Marker(point);  // 创建标注
        marker.enableDragging(); //marker可拖拽
         marker.addEventListener("click", function(e){
            searchInfoWindow.open(marker);
        })
        var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;100px;height:100px;margin-left:3px;"/>' +
    '地址:<br/>XXX<br/>电话:<br/>XXX' + '</div>'; //创建检索信息窗口对象 var searchInfoWindow = null; searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title : "XX公司", //标题 width : 290, //宽度 height : 105, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", { title: "信息框1", //标题 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_FROM_HERE, //从这里出发 BMAPLIB_TAB_SEARCH //周边检索 ] }); map.addOverlay(marker); // 将标注添加到地图中 map.centerAndZoom(point, 15); map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 function openInfoWindow1() { searchInfoWindow1.open(new BMap.Point(116.319852,40.057031)); } </script>
  • 相关阅读:
    缺省源
    MySQL曹操外卖一
    MySQL曹操外卖二
    正确使用MySQL外键约束
    html大部分实用标签(结构型)
    html超级基础标签
    我的简单作业
    章节课程复习笔记
    FC超级玛丽研究(NES游戏)
    二维码生成
  • 原文地址:https://www.cnblogs.com/bubuchu/p/7085580.html
Copyright © 2020-2023  润新知