angular使用百度地图多坐标点自定义图标的事件

首先需要在index里面引入你的百度ak。

<script src="http://api.map.baidu.com/getscript?v=2.0&ak=你的ak>

接着我们的html大概就是下面这样了，自己可以随便该样式的。

<div class="table-responsive">
      <div id="returnmap" class="pull-right" style="width:100%;height:600px;"></div>
</div>

其次开始开发我们控制器里面的内容了。

下面我们先创建地图以及中心点

$scope.address = null;
/**
* 初始化经度
*/
$scope.longitude = 115.655716;
/**
* 初始化纬度
*/
$scope.latitude = 38.614252;
/**
* 初始化百度地图
*/
$scope.map = new BMap.Map("returnmap"); // 创建地图实例
$scope.map.centerAndZoom(new BMap.Point($scope.longitude, $scope.latitude), 8); // 初始化地图，设置中心点坐标和地图级别
$scope.map.addControl(new BMap.NavigationControl());
$scope.map.addControl(new BMap.ScaleControl());
$scope.map.addControl(new BMap.OverviewMapControl());
$scope.map.enableScrollWheelZoom(true);

我这里使用的是

Business.request_server(SERVER_URL.接口).doOk(function(data) {//方法请求的，我们获取到接口里面的内容，就是坐标点跟你的内容data。

我这这里写了一个变量接收了坐标点

var point9;
Business.request_server(SERVER_URL.ssjk).doOk(function(data) {
point9 = data.data.数据;
$scope.map_car();
$scope.initBap = function() {
$scope.map_car();


};
});

接着我写了一个方法

$scope.map_car = function(state){

Business.request_server(SERVER_URL.地址,).doOk(function(data) {
$scope.points = 内容;
//下面这个方法是实现多个坐标点跟多个自定义图标的以及信息窗口。
$scope.car_map_del();

});

}

首先先定义了一个信息窗口的宽高

var opts = {
width : 400,     // 信息窗口宽度
height: 150,     // 信息窗口高度
enableMessage:true//设置允许信息窗发送短息
};

接着我在这个方法里面定义了一个数组，然后遍历了之前获取接口的内容。

$scope.car_map_del();
$scope.arr = [];
for(var i = 0; i < $scope.points.length; i++) {


$scope.latitude = $scope.points[i].lat;
$scope.longitude = $scope.points[i].lng;
$scope.content = $scope.points[i].内容;//这里是你的窗口要展示的数据

$scope.arr.push([$scope.longitude, $scope.latitude, 内容]);

}
});

接着我把所有的内容push到我这个空数组里面。

然后我定义了不同的图标，并且我又重新遍历了一遍我之前的arr，并在遍历的过程中把他的经纬度maker进去。在下面是设置了图标的大小，

接着你可以根据不同的条件判断应该放入哪一个图标，这里这是写入图标（里面是自己想要改变的图标），接着我们要写入到地图

再下面是根据百度地图里面的方法，（里面是你的$scope.ggPoint）;

var icons = "img/1.png";
var icons1 = "img/2.png";
var icons2 = "img/3.png";
var icons3 = "img/[email protected]"
var icons4 = "img/[email protected]"
var icons5 = "img/[email protected]"//以上是定义的不同图标

for(var j = 0; j < $scope.arr.length; j++) {
$scope.ggPoint = new BMap.Marker(new BMap.Point($scope.arr[j][0],$scope.arr[j][1]));

var icon = new BMap.Icon(icons, new BMap.Size(30, 33));
var icon1 = new BMap.Icon(icons1, new BMap.Size(30, 33));
var icon2 = new BMap.Icon(icons2, new BMap.Size(30, 33));
var icon3 = new BMap.Icon(icons3, new BMap.Size(30, 33));
var icon4 = new BMap.Icon(icons4, new BMap.Size(30, 33));
var icon5 = new BMap.Icon(icons5, new BMap.Size(30, 33));
if($scope.arr[j][4]==1||$scope.arr[j][4]==5){$scope.ggPoint.setIcon(icon);
}
if($scope.arr[j][4]==1||$scope.arr[j][4]==5&&$scope.arr[j][10]==1){

$scope.ggPoint.setIcon(icon3);
}
if($scope.arr[j][4]==0||$scope.arr[j][4]==4){
$scope.ggPoint.setIcon(icon1);
}
if($scope.arr[j][4]==2){
$scope.ggPoint.setIcon(icon2);
}
if($scope.arr[j][4]==2&&$scope.arr[j][10]==1){
$scope.ggPoint.setIcon(icon4);
}
if($scope.arr[j][4]==0||$scope.arr[j][4]==4&&$scope.arr[j][10]==1){
$scope.ggPoint.setIcon(icon5);
}

$scope.map.addOverlay($scope.ggPoint);
$scope.addClickHandler($scope.content,$scope.ggPoint);
}//这里是模拟的数据。、

然后下面是我写的addclickhandler的方法

$scope.addClickHandler= function(content,ggPoint){
ggPoint.addEventListener('click',function(e){
var pt = e.target;
var p = pt.getPosition();
// 这里主要是有重新遍历了一遍arr，然后定义了content里面的内容，就是信息窗口里面的内容。、
for(var k = 0; k < $scope.arr.length; k++) {
if($scope.arr[k][0] == p.lng && $scope.arr[k][1] == p.lat) {
$scope.content = "<div>你需要展示窗口内容</div>";



var infoWindow = new BMap.InfoWindow($scope.content,opts);  // 创建信息窗口对象 

$scope.map.openInfoWindow(infoWindow2,point);

}
}
});
}

上面是根据不同的图标显示不同的信息窗口；

如果有不懂得可以提问，希望大家给个宝贵的意见

本文到这里就写完了，这应该是最笨的方法了，写的不好希望大家原谅，谢谢！