百度地图api新手尝试，个性化定制，查询定位

来源：互联网发布：好玩的c语言小程序编辑：程序博客网时间：2024/06/16 08:19

刚开始学js的百度地图api，尝试了一下，把自己的第一个新手例子贴出来

一、首先得申请一个AK

二、官方有许多的demo，可以熟悉下

<!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 {width: 100%;height:90%;margin:0;font-family:"微软雅黑";}
       #allmap{width: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=您的秘钥"></script>
   <title>个性化地图设置页</title>

</head>

<body>http://write.blog.csdn.net/postedit/74091808

   <div id="allmap"></div>
   
   <div id="r-result">
       经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
       纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />http://write.blog.csdn.net/postedit/74091808
       <input type="button" value="查询" onclick="theLocation()" />
   </div>
</body>
</html>
<script type="text/javascript">

   var map = new BMap.Map('allmap');
   //map.centerAndZoom(new BMap.Point(116.404, 39.915）14); // 初始化地图,设置中心点坐标和地图级别
   map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
   map.setCurrentCity("kunming");          // 设置地图显示的城市此项是必须设置的

    var point = new BMap.Point(102.746056,25.082944);
   map.centerAndZoom(point, 15);

    var marker = new BMap.Marker(point); // 创建标注
   map.addOverlay(marker);               // 将标注添加到地图中
   marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画


   map.addControl(new BMap.NavigationControl());        // 添加平移缩放控件
   map.addControl(new BMap.ScaleControl());             // 添加比例尺控件
   map.addControl(new BMap.OverviewMapControl());       //添加缩略地图控件
   map.enableScrollWheelZoom();                         //启用滚轮放大缩小
   map.disable3DBuilding();



   var opts = {
      width : 200,     // 信息窗口宽度
      height: 100,     // 信息窗口高度
      title : "海底捞王府井店" , // 信息窗口标题
      enableMessage:true,//设置允许信息窗发送短息
      message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
   }
   var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
   marker.addEventListener("click", function(){
       map.openInfoWindow(infoWindow,point); //开启信息窗口
   });

   //定位函数
   function theLocation(){
       if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
           map.clearOverlays();
           var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
           var marker = new BMap.Marker(new_point); // 创建标注
           map.addOverlay(marker);              // 将标注添加到地图中
           map.panTo(new_point);
           //map.centerAndZoom(point, 15);
       }
   }
   //个性化在线编辑器地址：http://developer.baidu.com/map/custom/
      var styleJson = [
          {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": {
                              "color": "#021019"
                    }
          },
          {
                    "featureType": "highway",
                    "elementType": "geometry.fill",
                    "stylers": {
                              "color": "#000000"
                    }
          },
          {
                    "featureType": "highway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                              "color": "#147a92"
                    }
          },
          {
                    "featureType": "arterial",
                    "elementType": "geometry.fill",
                    "stylers": {
                              "color": "#000000"
                    }
          },
          {
                    "featureType": "arterial",
                    "elementType": "geometry.stroke",
                    "stylers": {
                              "color": "#0b3d51"
                    }
          },
          {
                    "featureType": "local",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#000000"
                    }
          },
          {
                    "featureType": "land",
                    "elementType": "all",
                    "stylers": {
                              "color": "#08304b"
                    }
          },
          {
                    "featureType": "railway",
                    "elementType": "geometry.fill",
                    "stylers": {
                              "color": "#000000"
                    }
          },
          {
                    "featureType": "railway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                              "color": "#08304b"
                    }
          },
          {
                    "featureType": "subway",
                    "elementType": "geometry",
                    "stylers": {
                              "lightness": -70
                    }
          },
          {
                    "featureType": "building",
                    "elementType": "geometry.fill",
                    "stylers": {
                              "color": "#000000"
                    }
          },
          {
                    "featureType": "all",
                    "elementType": "labels.text.fill",
                    "stylers": {
                              "color": "#857f7f"
                    }
          },
          {
                    "featureType": "all",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                              "color": "#000000"
                    }
          },
          {
                    "featureType": "building",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#022338"
                    }
          },
          {
                    "featureType": "green",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#062032"
                    }
          },
          {
                    "featureType": "boundary",
                    "elementType": "all",
                    "stylers": {
                              "color": "#1e1c1c"
                    }
          },
          {
                    "featureType": "manmade",
                    "elementType": "all",
                    "stylers": {
                              "color": "#022338"
                    }
          }
]
   map.setMapStyle({styleJson:styleJson});



</script>

阅读全文

0 0