zoukankan      html  css  js  c++  java
  • html5之调用百度地图

    <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>百度地图API地点搜索-获取经纬度DEMO</title>     <meta name="description" content="百度地图地点搜索和鼠标点击地点获取经纬度,这些都是地图比较基本和实用的代码,其中还包括了根据用户IP进行地图的显示、改变地图上的鼠标样式、启用滚轮缩放" />     <meta name="keywords" content="百度地图,地点搜索,获取经纬度,改变地图鼠标样式,启用滚轮缩放" />     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body> <form action="" method="get">     <label >地点:</label>     <input id="where" name="where" type="text" >     <input type="button" value="地图上找" onClick="sear(document.getElementById('where').value);" />     <br />     <div style="520px;height:340px;border:1px solid gray" id="container"></div>     <br />     经纬度:     <input id="lonlat" name="lonlat" type="text"> </form> <script type="text/javascript">     var map = new BMap.Map("container");//在指定的容器内创建地图实例     map.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式     map.enableScrollWheelZoom();//启用滚轮放大缩小,默认禁用。     map.centerAndZoom(new BMap.Point(116.124878, 24.309178), 13);     map.addControl(new BMap.NavigationControl());     map.addEventListener("click", function(e){//地图单击事件         document.getElementById("lonlat").value = e.point.lng + ", " + e.point.lat;     });     function iploac(result){//根据IP设置地图中心         var cityName = result.name;         map.setCenter(cityName);     }     var myCity = new BMap.LocalCity();     myCity.get(iploac);//根据ip设置地图中心     function sear(result){//地图搜索         var local = new BMap.LocalSearch(map, {             renderOptions:{map: map}         });         local.search(result);     } </script>

    </body> </html>

  • 相关阅读:
    mysql 取出每科成绩前两名
    mysql 数据库以及sql 的优化
    Twitter开源分布式自增ID算法snowflake
    SVN 冲突
    VUE 入门 1 列表、if判断 、双向绑定
    Roadblock
    最大子序和
    SOLDIERS
    绿豆蛙的归宿
    Place the Robots
  • 原文地址:https://www.cnblogs.com/shen119/p/3672701.html
Copyright © 2011-2022 走看看