recherche

Maison  >  Article  >  interface Web  >  js appelle la carte Baidu et appelle la fonction de recherche de carte Baidu_compétences javascript

js appelle la carte Baidu et appelle la fonction de recherche de carte Baidu_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:40:091845parcourir

Méthode JS pour appeler la carte Baidu

Le code est le suivant : 

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Hello, World</title>
 <style type="text/css">
  html
  {
   height: 100%;
  }
  body
  {
   height: 50%;
   margin: 0px;
   padding: 0px;
  }
  #container
  {
   width:600px;
   height: 500px;
  }
 </style>
 <script type="text/javascript" src="http://api.map.baidu.com/api&#63;v=1.3"></script>
</head>
<body onload="loand()">
 <div id="container">
 </div>
 <input id="lng" type="hidden" runat="server" />
 <input id="lat" type="hidden" runat="server" />
 <input id="Button1" type="button" value="标记图标" runat="server" onclick="getbiaoji()" />
 <script type="text/javascript">
  function getbiaoji() {
   var lng = document.getElementByIdx_x("lng").value;
   var lat = document.getElementByIdx_x("lat").value;
   var map = new BMap.Map("container");
   var point = new BMap.Point(lng, lat);
   var marker = new BMap.Marker(point);
   var opts = {
    width: 250,  // 信息窗口宽度 
    height: 100,  // 信息窗口高度 
    title: "经销商地址" // 信息窗口标题 
   }
   var infoWindow = new BMap.InfoWindow("移动拖拽 标记经销商地址:" + lng + lat, opts); // 创建信息窗口对象
   marker.enableDragging(); //启用拖拽
   map.addControl(new BMap.NavigationControl()); //左上角控件
   map.enableScrollWheelZoom(); //滚动放大
   map.enableKeyboard(); //键盘放大
   map.centerAndZoom(point, 13); //绘制地图
   map.addOverlay(marker); //标记地图
   map.openInfoWindow(infoWindow, map.getCenter());
  }
  function loand() {
   var map = new BMap.Map("container");
   var point = new BMap.Point(104.083, 30.686); //默认中心点
   var marker = new BMap.Marker(point);
   var opts = {
    width: 250,  // 信息窗口宽度 
    height: 100,  // 信息窗口高度 
    title: "经销商地址" // 信息窗口标题 
   }
   var infoWindow = new BMap.InfoWindow("移动拖拽 标记经销商地址", opts); // 创建信息窗口对象
   marker.enableDragging(); //启用拖拽
   marker.addEventListener("dragend", function (e) {
    point = new BMap.Point(e.point.lng, e.point.lat); //标记坐标（拖拽以后的坐标）
    marker = new BMap.Marker(point);
    document.getElementByIdx_x("lng").value = e.point.lng;
    document.getElementByIdx_x("lat").value = e.point.lat;
    infoWindow = new BMap.InfoWindow("当前位置<br />经度：" + e.point.lng + "<br />纬度：" + e.point.lat, opts);
    map.openInfoWindow(infoWindow, point);
   })
   map.addControl(new BMap.NavigationControl()); //左上角控件
   map.enableScrollWheelZoom(); //滚动放大
   map.enableKeyboard(); //键盘放大
   map.centerAndZoom(point, 13); //绘制地图
   map.addOverlay(marker); //标记地图
   map.openInfoWindow(infoWindow, map.getCenter());  // 打开信息窗口  
  }
 </script>
</body>
</html>

js appelle la recherche de carte Baidu

Citer Baidu js Api

<script type="text/javascript" src="http://api.map.baidu.com/api&#63;v=2.0&ak=xxxxxxxxxxxx"></script>

Créer un géocodeur : 

var localSearch = null;
//查询参数
var options = {
   //智能搜索
   onSearchComplete: function (results) {
    //查询结果状态码
    if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {
     var s = convertMapSearch(results); //对结果进行处理
     model.locationAddress(s); //将结果数据赋予knockout对象数组（可用其他数组对象代替）
    }
   }
  };
  localSearch = new BMap.LocalSearch("城市", options);

Combinez la méthode de liaison textInput de knockout et l'attribut d'abonnement de l'objet pour réaliser la fonction de requête en temps réel pour les modifications dans la zone de saisie. 

//绑定
<input id="txtAddress" type="text" placeholder="请输入用餐地址" data-bind="textInput: addressInput" />
//subscribe属性 在输入变化的时候执行地址查询
sf.addressInput.subscribe(function (val) {
   var addr = $.trim(val);
   if (addr == "") {
    return;
   }
   localSearch.search(addr);
  });

Ce qui précède est l'éditeur js de Script House partagé avec vous pour appeler la carte Baidu et appeler la fonction de recherche de la carte Baidu. Pour plus de contenu lié à la carte Baidu, veuillez continuer à prêter attention à ce site. sur ce site.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de menu déroulant simple JavaScript compétences code_javascriptArticle suivant：Exemple de menu déroulant simple JavaScript compétences code_javascript

Articles Liés

Voir plus