百度地圖API的自動定位和搜索功能（移動端）

時間 2019-11-10

原文原文鏈接

　　近期有個項目涉及到百度地圖API,要求作到自動定位和搜索功能。煞費苦心的研究半天，終於能將兩個功能合二爲一，現將代碼貼出來分享給你們，但願大家的磚搬得又快又好。註釋很少，具體請參照:http://lbsyun.baidu.com/index.php?title=jspopularjavascript

　　注意：這段代碼最好能上傳到新浪雲等免費空間，用手機打開鏈接便可看到效果，否則看不到看不到看不到哦。php

<!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: 100%;margin:0;font-family:"微軟雅黑";font-size:14px;}      body{position: relative;}      #outMap{height:500px;width:100%;position: absolute;top:2.8rem;}      #r-result{width:100%;}      .top{width: 95%;height: auto;margin: .5rem auto;position: relative;z-index: 3;font-family: Arial;font-size: 13.3px;}      /*.box{width:100%;height:1.5rem;position: absolute;top:0;left: 0;}*/      .top input{width: 80%;height: 1.5rem;}      .top .btn{background: orangered;border:none;width: 15%;height: 1.5rem;         -webkit-appearance: none;         -moz-appearance: none;         appearance: none;}      .moren{width: 80.7%;height: 1.3rem;border-bottom:1px solid #a9a9a9;border-left:1px solid #a9a9a9;border-right:1px solid #a9a9a9;position: absolute; }      .img{background: url(search.png)no-repeat;background-size: 80%;}      .close{width: 80.7%;height: 1.1rem;line-height:1.1rem;border-bottom:1px solid #a9a9a9;border-left:1px solid #a9a9a9;border-right:1px solid #a9a9a9;position: absolute;top:3.3rem;display: box;display: -webkit-box;}      .left{width: 80.7%;height: 1.2rem;}      .right{-webkit-box-flex: 1;box-flex:1;border-left:1px solid #a9a9a9;text-align: center;line-height: 1.2rem;}   </style>   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6VArBpbbbMjBVP22TflHkpSq"></script>   <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>    <title>百度地圖</title></head><body>   <!--步驟：1.寫一個div用來容納百度地圖;-->       <!--2.輸入公司的地址以後，獲取這個input的value;-->       <!--3.點擊搜索 使得地圖跳到公司的位置;-->   <div class="top">         <input type="text" id="keyword" />         <button class="btn" id="searchResultPanel" onclick="search()">搜索</button>   </div>   <div id="outMap"></div>   <div id="r-result">   </div>   </body></html><script type="text/javascript">   // 百度地圖API功能   window.onload=function(){   navigator.geolocation.getCurrentPosition(translatePoint);}function translatePoint(position){    var currentLat = position.coords.latitude;    var currentLon = position.coords.longitude;    var gpsPoint = new BMap.Point(currentLon, currentLat);    BMap.Convertor.translate(gpsPoint, 0, initMap); //轉換座標 } var map;function initMap(point){ //初始化地圖    map = new BMap.Map("outMap");    map.addControl(new BMap.NavigationControl());    map.addControl(new BMap.ScaleControl());    map.addControl(new BMap.OverviewMapControl());    map.centerAndZoom(point, 15);    map.addOverlay(new BMap.Marker(point)) }  function search(){                var keyword = document.getElementById("keyword").value;                var local = new BMap.LocalSearch(map, {                renderOptions:{map: map}            });            local.search(keyword);            }   //定位// var map = new BMap.Map("outMap");// map.centerAndZoom("生命科學園", 15);// var myCity = new BMap.LocalCity();// myCity.get(function(){////      alert(rs.name);//    map.setCenter(40.0747430000,116.1580900000);// });</script>最後附上本人百度地圖demo的連接，發送到手機便可查看，歡迎批評指正：http://1.jingcode.applinzi.com/map/geolocation.html