地图的调用

最新推荐文章于 2024-05-15 20:04:42 发布

weixin_34237596

最新推荐文章于 2024-05-15 20:04:42 发布

阅读量173

点赞数

原文链接：http://www.cnblogs.com/Gabriel-/p/10061039.html

版权

调用百度地图，先申请注册成为开发者，获取密钥

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <title>地图</title>
    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa"></script>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#res-navbar">
            
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            
          </button>
          <a href="0.html" class="navbar-brand"><strong>玫瑰绽放</strong></a>
          
        </div>

        <div class="collapse navbar-collapse" id="res-navbar">
          
          <ul class="nav navbar-nav">
            <li><a href="1.html">基本信息</a></li>
            <li><a href="2.html">早年经历</a></li>
            <li><a href="3.html">NBA生涯</a></li>
            <li><a href="4.html">场外生活</a></li>
            <li><a class="active" href="ditu.html">篮球场地址</a></li>
          </ul>
          <p class="navbar-text navbar-right"><strong>德里克罗斯——NBA史上最年轻的MVP</strong></p>
          
        </div>

      </div>
    </nav>

    <h1 align="center">像罗斯一样永不放弃，继续追逐篮球梦！</h1>
    <br>
    <div class="container">
      <div class="row">
        <div class="col-sm-2">

        </div>
        <div class="col-sm-10">
          <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>
        </div>

      </div>
    </div>
    <p align="center">（篮球场位置已经标记在地图中）</p>
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
      map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(104.064318,30.690383),14);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [
        {content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.638569,lng:104.091196}},
        {content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.664418,lng:104.036004}},
        {content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.64702,lng:104.205029}},
        {content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.741921,lng:104.090621}},
        {content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.674357,lng:104.128278}},
        {content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.683675,lng:104.054545}},
        {content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.662927,lng:104.063456}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
</script>
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</html>

转载于:https://www.cnblogs.com/Gabriel-/p/10061039.html

weixin_34237596

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
地图的调用

调用百度地图，先申请注册成为开发者，获取密钥<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta ...
复制链接

扫一扫