百度地图，基本开发

最新推荐文章于 2024-06-11 13:28:45 发布

fivestar2009

最新推荐文章于 2024-06-11 13:28:45 发布

阅读量1.2k

点赞数 2

分类专栏： html

本文链接：https://blog.csdn.net/fivestar2009/article/details/87454563

版权

html 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

写下对百度地图web的理解

3.1）百度地图还是很好用的，我理解的有些慢，弄了3天，只会写基本的，例如增加标注，增加自定义覆盖物，增加click rightClick等事件，也遇到了问题，查了资料，想了好久

3.2）按照http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld来做

就是普通的html页面，加上一个javascrpit连接

加上一个div

<div id="container"></div> 当然div需要指定大小

html{height:100%}

body{height:100%;margin:0px;padding:0px}

#container{height:100%}

然后一个script初始化百度地图

var map = new BMap.Map("container");

// 创建地图实例

var point = new BMap.Point(116.404, 39.915);

// 创建点坐标

map.centerAndZoom(point, 15);

这样就可以了

1. 增加标注

这样我使用鼠标点击，产生标注，即map需要增加click事件

map.addEventListener("click", function(e){

makeMark2(e);

});

Marker = new BMap.Marker(e.point); //标注需要指定point

Map.addOverlay(marker);// 这样就增加标注

label = new BMap.Label(e.clientX+"", {

offset: new BMap.Size(20, 0)

});//给标注增加标签

mk.setLabel(label);//把标签给标注

mk.enableDragging();//标注可以拖动

1. 我们需要在标注上进行操作，click事件，rightClick事件

mk.addEventListener("click", function(){

// showWindow1();

console.log("mk.addEventListenerclick");

showInfoWindow(e.point);

});

mk.addEventListener("rightclick", function(){

// showWindow12();

showInfoBox();

});

1. 增加InfoWindow,这个可以随意增加啊，就像普通的html页面，只是不需要html，body等标签

function showInfoWindow(point){

// var sContent ="天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...";

var sContent = "<div style=\"width:300px;height:200px\">" +

" 姓名:<input type=\"text\" id=\"firstname\" name=\"firstname\" > <br/>" +

" 年龄:<input type=\"text\" id=\"age\" name=\"age\" > <br/>" +

" <input type=\"button\" name=\"submit\" value=\"提交\" onClick=\"saveInfo()\" > <br/>" +

"</div>";

var infoWindow = new BMap.InfoWindow(sContent);

map.openInfoWindow(infoWindow,point);

}

我没有做会InfoBox，没有找到官方源码

1. 当然有时候，我们需要标注有事件现象，例如标注报警，我们需要在标注的地方发出光晕，那么我们就需要自定义的覆盖物了，官方文档给了代码，我在网上也找了代码，比较了下，分析下
  1. 首先有个构造函数

function ComplexCustomOverlay(point){

this._point = point;

}

3.5.2）给这个类一个prototype

ComplexCustomOverlay.prototype = new BMap.Overlay();

3.5.3）这个prototype需要要给初始化函数

ComplexCustomOverlay.prototype = new BMap.Overlay();

//ComplexCustomOverlay.prototype.initialize = function(map){

// // 保存map对象实例

// this._map = map;

// // 创建div元素，作为自定义覆盖物的容器

// var div = this._div = document.createElement("div");

div.style.position = "absolute";

div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);

// 可以根据参数设置元素外观

div.style.height = "35px";

div.style.width="35px";

// var arrow = this._arrow = document.createElement("img");

// arrow.src = "http://www.yantiansf.cn/mapImage/1.gif";

// arrow.style.width = "35px";

// arrow.style.height = "35px";

// arrow.style.top = "22px";

// arrow.style.left = "10px";

div.appendChild(arrow);

// var $div = $(div);

// $div.css("position","absolute");

// $div.css("zIndex",BMap.Overlay.getZIndex(this._point.lat));

// $div.css("height","35px");

// $div.css("width","35px");

// $div.css("position","absolute");

// div.appendChild(arrow);

// map.getPanes().labelPane.appendChild(div);

// return div;

// }

ComplexCustomOverlay.prototype.initialize = function(map){

// 保存map对象实例

this._map = map;

// 创建div元素，作为自定义覆盖物的容器

var div = this._div = document.createElement("div");

var $div = $(div);

$div.css("position","absolute");

$div.css("zIndex",BMap.Overlay.getZIndex(this._point.lat));

$div.css("height","35px");

$div.css("width","35px");

var halo = "<div class=\"content\" id=\"content\">" +

"<div class=\"one\" style=\"width:4px;height:4px;background-color:red;border: 6px #009FD9 solid;border-radius:50%;margin:10px;position: relative;\">" +

"<p style=\"position: absolute;width:4px;height:4px;border-radius:50%;box-shadow: 0px 0px 1px #009FD9;animation: myfirst 1.5s infinite;margin: 0px;\"></p>" +

"<span style=\"position: absolute;width:4px;height:4px;border-radius:50%;box-shadow: 0px 0px 1px #009FD9;animation: myfirst 1.5s infinite;margin: 0px;animation-delay: 0.8s;\"></span>" +

"</div>" +

"</div>";

$div.html(halo);

map.getPanes().labelPane.appendChild(div);

return div;

}

3.5.4）这个prototype需要被画出来

ComplexCustomOverlay.prototype.draw = function(){

var map = this._map;

var pixel = map.pointToOverlayPixel(this._point);

// this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";

// this._div.style.top = pixel.y - 30 + "px";

this._div.style.left = pixel.x -20 + "px";

this._div.style.top = pixel.y -20 + "px";

}

3.5.5）如果需要这个覆盖物类需要这个click事件，我估计什么dbclick,rightClick都能有

ComplexCustomOverlay.prototype.addEventListener = function(event,fun){

console.log("eventeventeventeventevent");

console.log(event);

this._div['on'+event] = fun;

}

3.5.6）使用这个自定义覆盖物

var myCompOverlay = new ComplexCustomOverlay(e.point);

map.addOverlay(myCompOverlay);//将标注添加到地图中

myCompOverlay.addEventListener('click',function(){

// alert("点击图标");

console.log("2222222222222222222");

clickFlag = true;

map.removeOverlay(myCompOverlay);

});

3.5.7）说下这个自定义覆盖物重要部分ComplexCustomOverlay.prototype.initialize

这个前面都是固定的

this._map = map;

// // 创建div元素，作为自定义覆盖物的容器

// var div = this._div = document.createElement("div"); 注意这个，这个div需要在draw中，给它赋值

div.style.position = "absolute";

div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);

// 可以根据参数设置元素外观

div.style.height = "35px";

div.style.width="35px";

这些事给覆盖物一个容器，即div，然后设置大小

var arrow = this._arrow = document.createElement("img");

// arrow.src = "http://www.yantiansf.cn/mapImage/1.gif";

// arrow.style.width = "35px";

// arrow.style.height = "35px";

// arrow.style.top = "22px";

// arrow.style.left = "10px";

div.appendChild(arrow);

这些是创建一个元素，然后使用div.appendChild(arrow);把元素给div

map.getPanes().labelPane.appendChild(div);

// return div;

然后是把div给map，返回div,这个是官方的方法，也可以采用jquery的方式

var $div = $(div);//把元素转换成jquery对象，

var halo = "<div class=\"content\" id=\"content\">" +

"<div class=\"one\" style=\"width:4px;height:4px;background-color:red;border: 6px #009FD9 solid;border-radius:50%;margin:10px;position: relative;\">" +

"<p style=\"position: absolute;width:4px;height:4px;border-radius:50%;box-shadow: 0px 0px 1px #009FD9;animation: myfirst 1.5s infinite;margin: 0px;\"></p>" +

"<span style=\"position: absolute;width:4px;height:4px;border-radius:50%;box-shadow: 0px 0px 1px #009FD9;animation: myfirst 1.5s infinite;margin: 0px;animation-delay: 0.8s;\"></span>" +

"</div>" +

"</div>";

$div.html(halo);

定义一个具体我们需要展示的界面，然后给div

然后重要的是需要把自定义覆盖物给画出来，就是这个div在地图中的位置，我们使用piexl这个对象就行

ComplexCustomOverlay.prototype.draw = function(){

var map = this._map;

var pixel = map.pointToOverlayPixel(this._point);

// this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";

// this._div.style.top = pixel.y - 30 + "px";

this._div.style.left = pixel.x -20 + "px";

this._div.style.top = pixel.y -20 + "px";

}

关于试下了map.click marker.click , Customeroverlay.click事件执行问题，如果不做特殊处理，这几个都会执行，我搜了网上的说发，map.click事件，的e中的overlay是null，marker.click中不是null，这个也对

百度地图Map、Marker以及Label点击事件的区分

当我们同时为Marker和Map添加click事件后，会发现点击Marker时，不仅触发了Marker的click事件，Map的click事件也会同时被触发。实际上点击地图上的任何覆盖物都会传递到Map，这是因为API会将事件向上传递。那么如何区分呢？在Map的click事件中的事件参数e包含了一个名为overlay的属性，当我们点击地图上的Marker时，e.overlay为一个Marker对象；当我们点击地图上的Label时，e.overlay为一个Label对象；而当我们单单点击地图时，e.overlay则为null。因此我们可以在事件函数中通过判断e.overlay是否存在以及为何种对象来加以区分。（这个是网上的说法）

后来增加了自定义覆盖物，它的overlay也是空，无法执行了，冲突了，其实百度地图早就给了答案，大家打印下日志就会发现，覆盖物的click是优先与map的click事件的，我们可以增加标志，判断下就行了

一个demo

<!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:100%;margin:0px;padding:0px}
#container{height:100%}

@keyframes myfirst
{
   10% {transform :scale(1);}
   100% {transform :scale(8);}
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=59yZNlGGAlY2IKeg5SYuHeA4cNmSBIqO">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script type="text/javascript" src="/assets/ui/jquery.min.js"></script>
</head>

<body>
<div>
   <input type="button" name="搜索" value="搜索" onClick="search()" />
   <input type="button" name="地址转换" value="地址转换" onClick="changeAddress()" />
   <input type="button" name="添加标注" value="添加标注" onClick="makeMark()" />
   <input type="button" name="显示光晕" value="显示光晕" onClick="showLight()" />
   <input type="button" name="隐藏光晕" value="隐藏光晕" onClick="hideLight()" />
</div>
<div id="container"></div>
<script type="text/javascript" src="/assets/js/testmap.js"></script>
</body>
</html>

------js----

var clickFlag = false;

window.lastInfoBox = null;//定义上一个窗体为lastInfoBox;

function ComplexCustomOverlay(point){
this._point = point;
}

ComplexCustomOverlay.prototype = new BMap.Overlay();

//ComplexCustomOverlay.prototype.initialize = function(map){
//    // 保存map对象实例
//    this._map = map;
//    // 创建div元素，作为自定义覆盖物的容器
//    var div = this._div = document.createElement("div");
    div.style.position = "absolute";
    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
    // 可以根据参数设置元素外观
    div.style.height = "35px";
    div.style.width="35px";

//    var arrow = this._arrow = document.createElement("img");
//    arrow.src = "http://www.yantiansf.cn/mapImage/1.gif";
//    arrow.style.width = "35px";
//    arrow.style.height = "35px";
//    arrow.style.top = "22px";
//    arrow.style.left = "10px";
    div.appendChild(arrow);
//
//    var $div = $(div);
//    $div.css("position","absolute");
//    $div.css("zIndex",BMap.Overlay.getZIndex(this._point.lat));
//    $div.css("height","35px");
//    $div.css("width","35px");
//    $div.css("position","absolute");
//    div.appendChild(arrow);
//
//    map.getPanes().labelPane.appendChild(div);
//    return div;
//
// }

ComplexCustomOverlay.prototype.initialize = function(map){
    // 保存map对象实例
    this._map = map;
    // 创建div元素，作为自定义覆盖物的容器
    var div = this._div = document.createElement("div");

    var $div = $(div);
    $div.css("position","absolute");
    $div.css("zIndex",BMap.Overlay.getZIndex(this._point.lat));
    $div.css("height","35px");
    $div.css("width","35px");

    var halo = "<div class=\"content\" id=\"content\">" +
               "<div class=\"one\" style=\"width:4px;height:4px;background-color:red;border: 6px #009FD9 solid;border-radius:50%;margin:10px;position: relative;\">" +
               "<p style=\"position: absolute;width:4px;height:4px;border-radius:50%;box-shadow: 0px 0px 1px #009FD9;animation: myfirst 1.5s infinite;margin: 0px;\"></p>" +
               "<span style=\"position: absolute;width:4px;height:4px;border-radius:50%;box-shadow: 0px 0px 1px #009FD9;animation: myfirst 1.5s infinite;margin: 0px;animation-delay: 0.8s;\"></span>" +
               "</div>" +
           "</div>";
    $div.html(halo);

    map.getPanes().labelPane.appendChild(div);
    return div;

}

ComplexCustomOverlay.prototype.draw = function(){
    var map = this._map;
    var pixel = map.pointToOverlayPixel(this._point);
//    this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
//    this._div.style.top = pixel.y - 30 + "px";
    this._div.style.left = pixel.x -20 + "px";
    this._div.style.top = pixel.y -20 + "px";
}

ComplexCustomOverlay.prototype.addEventListener = function(event,fun){
   console.log("eventeventeventeventevent");
   console.log(event);
    this._div['on'+event] = fun;
}

//var geolocation = new BMap.Geolocation();
//geolocation.getCurrentPosition(function(r){
//   if(this.getStatus() == BMAP_STATUS_SUCCESS){
//      mk = new BMap.Marker(r.point);
//      mk.addEventListener("dragend", showInfo);
//      mk.enableDragging();    //可拖拽
//
//      getAddress(r.point);
//
//
//      map.addOverlay(mk);//把点添加到地图上
//      map.panTo(r.point);
//
//
// }else {
//      alert('fail'+this.getStatus());
// }
//});

// 初始化地图，设置中心点坐标和地图级别

function search(){
   alert("search");
   var local = new BMap.LocalSearch(map, {
       renderOptions:{map: map}
   });
   local.search("天津");
}

function makeMark(){
   var marker = new BMap.Marker(point); // 创建标注
   map.addOverlay(marker);
//   marker.addEventListener("click", function(){
       alert("您点击了标注");
//       mydrag();
//   });

//   marker = new BMap.Marker(r.point);
//   marker.addEventListener("dragend", showInfo);
   marker.enableDragging();    //可拖拽

//    getAddress(r.point);
//
//
//    map.addOverlay(mk);//把点添加到地图上
//    map.panTo(r.point);
}

绑定Marker的拖拽事件
function showInfo(e){
var gc = new BMap.Geocoder();
gc.getLocation(e.point, function(rs){
      var addComp = rs.addressComponents;
      var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
      alert(address);
      //画图 ---》显示地址信息
      var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
      map.removeOverlay(mk.getLabel());//删除之前的label

      mk.setLabel(label);
      //alert(e.point.lng + ", " + e.point.lat + ", "+address);
   });
}

//获取地址信息，设置地址label
function getAddress(point){
    var gc = new BMap.Geocoder();

    gc.getLocation(point, function(rs){
        var addComp = rs.addressComponents;
        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
           alert(address);
        //画图 ---》显示地址信息
        var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
        map.removeOverlay(mk.getLabel());//删除之前的label

        mk.setLabel(label);

     });
}

function showWindow1(){

   var opts = {
       width : 250, // 信息窗口宽度
       height: 100, // 信息窗口高度
       title : "Hello" // 信息窗口标题
   }
   var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
   map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
}

function showWindow12(){

   var opts = {
       width : 250, // 信息窗口宽度
       height: 100, // 信息窗口高度
       title : "aaaaa" // 信息窗口标题
   }
   var infoWindow = new BMap.InfoWindow("bbbbbbbb", opts); // 创建信息窗口对象
   map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
}

function showInfoWindow(point){
//   var sContent ="天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...";
   var sContent = "<div style=\"width:300px;height:200px\">" +
                   " 姓名:<input type=\"text\" id=\"firstname\" name=\"firstname\" > <br/>" +
                   " 年龄:<input type=\"text\" id=\"age\" name=\"age\" > <br/>" +
                   " <input type=\"button\" name=\"submit\" value=\"提交\" onClick=\"saveInfo()\" > <br/>" +
           "</div>";
   var infoWindow = new BMap.InfoWindow(sContent);
   map.openInfoWindow(infoWindow,point);
}

function saveInfo(){
   var name = $("#firstname").val();
   var age = $("#age").val();
   console.log(name);
   console.log(age);
}

fivestar2009

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图，基本开发

写下对百度地图web的理解3.1）百度地图还是很好用的，我理解的有些慢，弄了3天，只会写基本的，例如增加标注，增加自定义覆盖物，增加click rightClick等事件，也遇到了问题，查了资料，想了好久3.2）按照http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld来做就是普通的html页面，加上一个jav...
复制链接

扫一扫

专栏目录