zoukankan      html  css  js  c++  java
  • HTML5——地图应用

    我们就拿百度地图举例吧:

    废话少说,直接上Demo

    简要截图如下:'

    简要代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <title>地图应用</title>
    <meta charset="utf-8">
    </head>
    <body>
    <input type="button" id="btn1" value="显示地理信息"/><br/>
    <div id="dvShow" style="400px;height:400px;border:1px solid blue;"></div>
    </body>
    </html>
    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
    <script type="text/javascript">
    var oInput=document.getElementById("btn1");
    oInput.onclick=function(){

    navigator.geolocation.getCurrentPosition(function(position){//写一个成功的回掉函数

    //根据 “经纬度API” 获取位置
    var x=position.coords.longitude;//获取经度
    var y=position.coords.latitude;//获取纬度

    //根据 “百度API” 创建地图
    var map=new BMap.Map("dvShow");
    var pt=new BMap.Point(x,y);

    map.centerAndZoom(pt,14);
    map.enableScrollWheelZoom();//启动滚轮放大缩小,默认是禁止的
    var marker1=new BMap.Marker(pt);//创建标注
    map.addOverlay(marker1);
    //信息窗口展示
    var opts = {
    width : 250, // 信息窗口宽度
    height: 100, // 信息窗口高度
    title : "RYJ地图" // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow("这里是RYJ基地中心", opts); // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
    //---------------------------------------------点击标注弹出信息窗口---------------------------------------------

    marker1.addEventListener("click", function(e){
    this.openInfoWindow(infoWindow);
    });



    });
    }
    </script>

     百度地图API下载:http://pan.baidu.com/s/1i5CUhKT

  • 相关阅读:
    ServU和win2003防火墙的设置
    面试题02.05 链表求和
    【每日一题】LeetCode1. 两数之和
    【每日一题】Leetcode50. Pow(x,n)
    ASP连接查询access和sqlserver的代码
    各种播放器(视频点播)代码大全 
    电脑操作最忌讳的小动作
    网络小知识
    C#、Java比较
    10年互联网十大失败案例
  • 原文地址:https://www.cnblogs.com/shuai7boy/p/5439430.html
Copyright © 2011-2022 走看看