谈谈百度地图API使用（标注，自定义控件，信息窗口，拖... ）

最新推荐文章于 2022-12-22 19:41:17 发布

aixijuan6046

最新推荐文章于 2022-12-22 19:41:17 发布

阅读量233

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/wth2010/p/3890673.html

版权

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标注点</title>

<style type="text/css">
      * {
         margin: 0;
         padding: 0;
         list-style-type: none;
      }

      a, img {
         border: 0;
      }

      body {
         font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
      }

      .demo {
         width: 850px;
         margin: 20px auto;
      }

      #l-map {
         height: 400px;
         width: 600px;
         float: left;
         border: 1px solid #bcbcbc;
      }

      #r-result {
         height: 400px;
         width: 230px;
         float: right;
      }

      html, body {
         margin: 0;
         padding: 0;
      }

      .iw_poi_title {
         color: #CC5522;
         font-size: 14px;
         font-weight: bold;
         overflow: hidden;
         padding-right: 13px;
         white-space: nowrap;
      }

      .iw_poi_content {
         font: 12px arial,sans-serif;
         overflow: visible;
         padding-top: 4px;
         white-space: -moz-pre-wrap;
         word-wrap: break-word;
      }

      .btnbz {
         text-align: center;
      }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
      function msg(print) {
         var objprint = print;
         var objcity = document.getElementById("txtcity");
         if (confirm("是否确定将当前坐标点位置标注为：" + objcity.value + "？")) {
            alert("ok");
         }
      }
</script>
</head>
<body>

<div class="demo">

      <p style="height: 40px;">
         输入城市：<input id="txtCity" type="text" />
         <button>获取坐标</button>
         坐标：<input id="txtPoint" type="text" />
      </p>

      <div id="l-map"></div>
      <div id="r-result"></div>

</div>

<script type="text/javascript">
      // 百度地图API功能

      var map = new BMap.Map("l-map");          // 创建Map实例
      map.centerAndZoom(new BMap.Point(114.465567, 22.607958), 17);
      addMapControl();
      setMapEvent();
      var icon = new BMap.Icon('pin.png', new BMap.Size(20, 32), {});
      var mkr;

      function ZoomControl() {
         // 默认停靠位置和偏移量
         this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
         this.defaultOffset = new BMap.Size(10, 10);
      }

      // 通过JavaScript的prototype属性继承于BMap.Control
      ZoomControl.prototype = new BMap.Control();

      // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
      // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
      ZoomControl.prototype.initialize = function (map) {

         // 创建一个DOM元素
         var div = document.createElement("div");
         // 添加文字说明
         div.appendChild(document.createTextNode("标注"));
         // 设置样式
         div.style.cursor = "pointer";
         div.style.border = "1px solid gray";
         div.style.backgroundColor = "white";
         div.style.color = "red";
         // 绑定事件
         div.onclick = function show(e) {
            if (mkr == null) {
                  mkr = new BMap.Marker(map.getCenter(), {
                     icon: icon,
                     enableDragging: true,//开启拖动效果
                     raiseOnDrag: true//开启拖动效果
                  });
                  map.addOverlay(mkr);
            }
            else {
                  map.removeOverlay(mkr);
                  mkr = new BMap.Marker(map.getCenter(), {
                     icon: icon,
                     enableDragging: true,//开启拖动效果
                     raiseOnDrag: true//开启拖动效果
                  });
                  map.addOverlay(mkr);
            }

            //监听拖动位置并显示到文本框
            mkr.addEventListener('dragend', function show1(e) {//监听拖动位置
                  //alert(e.point.lng + ', ' + e.point.lat);
                  document.getElementById("txtPoint").value = e.point.lng + "," + e.point.lat;//在地图上单击之后把经纬度显示到文本
                  var varprint = e.point.lng + ', ' + e.point.lat;
                  var infoWindow = new BMap.InfoWindow("<b class='iw_poi_title' title='当前位置坐标'>当前位置坐标</b><div class='iw_poi_content'>坐标地址：" + e.point.lng + ', ' + e.point.lat + "<br/>输入名称：<input type='text' id='txtcity'/><div class='btnbz'><input type='button' value='创建标注点' οnclick='msg();'/></div></div>");
                  map.openInfoWindow(infoWindow, e.point); //开启信息窗口
            })
         }
         // 添加DOM元素到地图中
         map.getContainer().appendChild(div);
         // 将DOM元素返回
         return div;
      }
      // 创建控件
      var myZoomCtrl = new ZoomControl();
      // 添加到地图当中
      map.addControl(myZoomCtrl);

      var local = new BMap.LocalSearch("全国", {
         renderOptions: {
            map: map,
            panel: "r-result",
            autoViewport: true,
            selectFirstResult: false
         }
      });

      //地图事件设置函数：
      function setMapEvent() {
         map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
         map.enableScrollWheelZoom();//启用地图滚轮放大缩小
         map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
         map.enableKeyboard();//启用键盘上下左右键移动地图
      }

      //地图控件添加函数：
      function addMapControl() {
         //向地图中添加缩放控件
         var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
         map.addControl(ctrl_nav);
         //向地图中添加缩略图控件
         var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 0 });
         map.addControl(ctrl_ove);
         //向地图中添加比例尺控件
         var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
         map.addControl(ctrl_sca);
      }

      //点击按钮“获取坐标”，产生的事件
      function getPoint() {
         var city = document.getElementById("txtCity").value;
         local.search(city);                // 初始化地图,设置城市和地图级别。
         //启用滚轮放大缩小
      }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/wth2010/p/3890673.html

aixijuan6046

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谈谈百度地图API使用（标注，自定义控件，信息窗口，拖... ）

<!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> &lt...
复制链接

扫一扫