1, 省略注册等步骤
2, 省略 html 等步骤
- mounted(){
- this.intGis();
- },
- methods:{
- intGis(){
- this.map = new BMap.Map("container");
- var point = new BMap.Point(116.376, 39.999); // 定位的地图视觉中心
- this.map.centerAndZoom(point, 13); // 设置地图的缩放级别
- this.map.enableScrollWheelZoom(); // 允许鼠标滚动缩放
- },
- getlargeMark(){
- if(document.createElement('canvas').getContext){ // 判断浏览器是否支持
- var map=this.map;
- var data=this.markdatas;
- var that=this
- var areaXyArr=[];
- // var points=[];
- this.pointsTuijian=[]; // 设置不同的点的数组, 不同点有不同的颜色
- this.pointsPeiyu=[]; // 设置不同的点的数组, 不同点有不同的颜色
- this.pointsChubei=[]; // 设置不同的点的数组, 不同点有不同的颜色
- this.map.clearOverlays(); // 请求之前先清理所有的点, 如果不清除, 每次接口请求不同的数据的时候, 点不会更新
- for (var i = 0; i <data.length; i++) { // 循环遍历把不同类型的点分别放在不同数组
- var data2=data[i];
- if(data2.areaXy){
- if(data2.recommend){
- if(data2.recommend=="推荐"){
- var areaXyArr=data2.areaXy.split(',');
- this.pointsTuijian.push(new BMap.Point(parseFloat(areaXyArr[0]),parseFloat(areaXyArr[1])));
- }
- else if(data2.recommend=="培育"){
- var areaXyArr=data2.areaXy.split(',');
- this.pointsPeiyu.push(new BMap.Point(parseFloat(areaXyArr[0]),parseFloat(areaXyArr[1])));
- }
- else if(data2.recommend=="储备"){
- var areaXyArr=data2.areaXy.split(',');
- this.pointsChubei.push(new BMap.Point(parseFloat(areaXyArr[0]),parseFloat(areaXyArr[1])));
- }
- }
- }
- }
- this.changePointsColor(this.pointsTuijian,this.optionsTuijian); // this.optionsTuijian 等有不同的样式配置
- this.changePointsColor(this.pointsPeiyu,this.optionsPeiyu);
- this.changePointsColor(this.pointsChubei,this.optionsChubei);
- this.getFourNums(data.length)
- }else{
- alert('请在 chrome,safari,IE8 + 以上浏览器查看本示例');
- }
- },
- // 初始化不同颜色的点, 这和上一步完成不同颜色点的创建
- changePointsColor(points,options){
- var map=this.map;
- var pointCollection = new BMap.PointCollection(points, options); // 初始化 PointCollection
- map.addOverlay(pointCollection); // 添加 Overlay
- this.clickPoints(pointCollection);// 给点添加点击事件
- },
- // 点击弹出弹窗
- clickPoints(pointCollection){
- var map=this.map;
- var data=this.markdatas;
- // console.log(data)
- pointCollection.addEventListener('click', function (e) {
- // alert('单击点的坐标为:' + e.point.lng + ',' + e.point.lat);
- // 循环查出值
- for (var i = 0; i < data.length; i++) {
- if(data[i].areaXy){
- if(parseFloat(data[i].areaXy.split(',')[0])==e.point.lng && parseFloat(data[i].areaXy.split(',')[1])==e.point.lat){ // 找到 点击的点在 data 中的 index
- var id=data[i].compId // 通过找到的 index 得到这个 id, 通过这个 id 来请求获取窗体中的信息, 请求接口步骤省略
- var Content=`<div > 窗体信息 </div>`
- var infoWindow = new BMap.InfoWindow(Content,this.opts); // 创建信息窗口对象
- map.openInfoWindow(infoWindow,point); // 开启信息窗口
- }
- }
- }
- });
- },
- }
来源: http://www.jianshu.com/p/2fb2d84fb206