zoukankan      html  css  js  c++  java
  • 在自己网页中嵌入百度地图

    刚刚开始工作,领导就让我做一个百度地图,我不会所以问百度。

    我认为有点难的怎么把获取坐标,百度的API,因为创建地图实例" var point = new BMap.Point(120.619907,31.317987)",是以坐标来确定显示的位置,

    而百度不提供坐标服务,搜了一下,Google有提供服务的(http://blog.csdn.net/kalision/article/details/7236344),Google横纵坐标和百度相反,感觉如果用Google地图查坐标再转百度地图太麻烦,但是客户要求百度地图,无奈只得继续百度,请大家多多点评

    然后整理下面的一些代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
        <title>百度地图</title>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <style type="text/css">
        body{height:600px;;margin:0px;padding:0px; width:800px;}
        #container{height:100%}
    </style>
    </head>
    <body onkeydown="btSearche()">
    <div>
            <input type="text" name="city" runat="server" id="city" value="" size="8" />         
            <input type="text" name="adress" id="adress" runat="server"  value=""  /> 
            <!--这里可以看到坐标!-->
        <input type="text" name="point" value=""  runat="server" id="coordinates" /><input type="text" name="point" value="" runat="server" id="coordinates1" />
        <input type="button"  value="搜索" onclick="searche_address()"/>
    </div>
        
    
    <div id="container"></div>
    
    <script type="text/javascript">
        function btSearche() {
            if (event.keyCode == 13) {
                searche_address();
            }
        }
        function searche_address() { point(document.getElementById('city').value, document.getElementById('adress').value, 'coordinates') };
    
        function point(ygh_city, ygh_adress) {
            if (ygh_adress == "" || ygh_city == "") {
                alert("请输入具体地址!");
                return;
            }
        //确定坐标"myGeo.getPoint()"
    var myGeo = new BMap.Geocoder(); myGeo.getPoint(ygh_adress, function (point) { if (point) { document.getElementById('coordinates').value = point.lng; document.getElementById('coordinates1').value = point.lat; var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(point.lng, point.lat); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); //平移控件 map.addControl(new BMap.ScaleControl()); //比例尺控件 map.addControl(new BMap.OverviewMapControl()); //缩略图控件 map.addControl(new BMap.MapTypeControl()); //电子地图的地图类型控件 //map.setCurrentCity("石路步行街"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用 var marker = new BMap.Marker(point); map.addOverlay(marker); //位置说明提示框 var opts = { title: '<span style="font-size:14px;color:#0A8021">我的地盘</span>' }; var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>你懂的</br><b>电话:</b>0512-859921010</br>详情>></a></div>", opts); // 创建信息窗口对象,引号里可以书写任意的html语句。 map.openInfoWindow(infoWindow, map.getCenter()); } else { alert("没有找到坐标,您可以放大您选择的地址!"); } }, ygh_city); } point("江苏", "苏州市"); </script> </body> </html>
  • 相关阅读:
    Python服务Dokcer化并k8s部署实例
    Docker Machine
    Docker使用Portainer搭建可视化界面
    三小时攻克 Kubernetes!
    Docker使用pipework配置本地网络
    使用kubeadm安装kubernetes1.12.2版本脚本【h】
    rsync详解之exclude排除文件(转)
    linux生成指定大小的文件(转)
    chown将指定文件的拥有者改为指定的用户或组(转)
    Linux系统分析命令总结
  • 原文地址:https://www.cnblogs.com/chen54/p/2678742.html
Copyright © 2011-2022 走看看