整理一下~

一、在vue中调用百度地图

首先当然是申请百度密匙(很简单,不多说)

1、在index.html文件中引入百度地图JavaScript API接口:

 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密匙部分哦"></script>
2、在bulid/webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级

3、在地图组件中import BMap:

import BMap from 'BMap'

4、创建容器,用来显示百度地图,注意给高宽

5、还有一个比较好用的白兔地图生成器,可以实现基本的需求吧,标路线之类的我还没有用过,这儿没有。

http://api.map.baidu.com/lbsapi/creatmap/index.html

这个生成器可以生成代码,有些注释,一目了然。不过多介绍了。

 

二、在Angular中调用百度地图

一样的在index.html文件中引入百度地图JavaScript API接口,如上。基本的就不多说了

下面记录一下过程中的问题:

一、标注点的图标不显示

即,标注点显示在地图中,但是绿色的水滴形标记未能显示。在生成器中的代码主要是这几行:

查了一下,我这边的原因是图片地址不对,更换图片地址后就正确了。

图片地址改为如下就可以成功显示了:

http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png
 

二、另一个大问题就是代码中会有一个中心点经纬度,设置这个中心点的经纬度之后可能就会有部分标注点不能够在容器范围中展示

加入如下方法:

 function getZoom (maxLng, minLng, maxLat, minLat) {
var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"]//级别18到3。
var pointA = new BMap.Point(maxLng,maxLat); // 创建点坐标A
var pointB = new BMap.Point(minLng,minLat); // 创建点坐标B
var distance = map.getDistance(pointA,pointB).toFixed(1); //获取两点距离,保留小数点后两位
for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
if(zoom[i] - distance > 0){
return 18-i+2;//之所以会多3,是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
}
};
}
function setZoom(dataArr){
var lnglat=[{
lng:"",
lat:''
}]; if(dataArr.length>0){
console.log('lll')
lnglat[0].lng = dataArr[0].point.split("|")[0];
lnglat[0].lat = dataArr[0].point.split("|")[1];
console.log( lnglat[0].lng);
var maxLng = lnglat[0].lng;
var minLng = lnglat[0].lng;
var maxLat = lnglat[0].lat;
var minLat = lnglat[0].lat;
var res; console.log('aaabbbb')
for (var i = dataArr.length-1; i >= 0; i--) {
console.log('dataArr')
lnglat[0].lng = dataArr[i].point.split("|")[0];
console.log(lnglat[0])
lnglat[0].lat =dataArr[i].point.split("|")[1];
res = lnglat[0];
if(res.lng > maxLng) maxLng =res.lng;
if(res.lng < minLng) minLng =res.lng;
if(res.lat > maxLat) maxLat =res.lat;
if(res.lat < minLat) minLat =res.lat;
};
console.log('dffdsssdf')
var cenLng =(parseFloat(maxLng)+parseFloat(minLng))/2;
var cenLat = (parseFloat(maxLat)+parseFloat(minLat))/2;
var zoom = getZoom(maxLng, minLng, maxLat, minLat);
map.centerAndZoom(new BMap.Point(cenLng,cenLat), zoom);
}else{
//没有坐标,显示全中国
map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5);
}
}

然后调用,就可以实现计算出中心点,和缩放程度了,点多了基本也没有问题。

这就是我目前,调地图的一些记录。代码就不逐行在这里介绍了。百度地图API的开放文档里有很多资料~

地址贴下面吧,也方便我自己 日后复习:http://lbsyun.baidu.com/index.php?title=jspopular

 

Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置的更多相关文章

  1. Vue调用百度接口做百度搜索

    这两天由于学习需要,需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口,不会没关系,发挥我们强大的学习能力,都不是事,学习了半天基本也就可以初级上手了,写篇随笔记录下来,方便以后回顾 ...

  2. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  3. Angular 调用百度地图API接口

    Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...

  4. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  5. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  6. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  7. 百度地图API显示多个标注点带百度样式信息检索窗口的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. vue使用百度地图

    1.在百度地图申请密钥:http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http:// ...

  9. 百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. [js]js中函数传参判断

    1,通过|| function fun(x,y){ x=x||0; y=y||1; alert(x+y); } fun(); 2.通过undefined对比 function fun(x,y){ if ...

  2. 8 . IO类-标准IO、文件IO、stringIO

    8.1 IO类 #include <iostream> //标准IO头文件  8.2 文件输入输出流 #include <fstream> //读写文件头文件 std::fst ...

  3. python2精确除法

    python2和python3除法的最大区别: python2: print 500/1000 python2结果:取整数部分,小数并没有保留 0 Process finished with exit ...

  4. vue-amap | 基于 Vue 2.x 与高德的地图组件

    vue-amap | 基于 Vue 2.x 与高德的地图组件 参考:https://elemefe.github.io/vue-amap/#/

  5. MySQL变量的使用

    在mysql文档中,mysql变量可分为两大类,即系统变量和用户变量. 但根据实际应用又被细化为四种类型,即局部变量.用户变量.会话变量和全局变量. 一.局部变量 mysql局部变量,只能用在begi ...

  6. CentOS 7 服务端口表

    # Note that it is presently the policy of IANA to assign a single well-known# port number for both T ...

  7. oracle常用函数介绍

    Oracle函数 Oracle SQL提供了用于执行特定操作的专用函数,这些函数大大增强了SQL语言的功能.函数可以接受零个或者多个输入参数,并返回一个输出结果.Oracle数据库中主要使用两种类型的 ...

  8. P1636 Einstein学画画

    一笔画问题 P1636 Einstein学画画 如果一个图存在一笔画,则一笔画的路径叫做欧拉路,如果最后又回到起点,那这个路径叫做欧拉回路. 奇点:跟这个点相邻的边数目有奇数个的点 不存在奇数个奇点的 ...

  9. C# 生成 COM控件

    C#编写COM组件 软件:Microsoft VisualStudio 2010 1.新建一个类库项目 2.将Class1.cs改为我们想要的名字(例如:MyClass.cs) 问是否同时给类改名,确 ...

  10. C++反射实现(转)

    参考了wxWidgets的相关代码,并进行简化,同时借鉴了网上的相关内容,改进之处在于,只需要继承基本类Object,在类的头文件中定义宏,DECLARE_CLASS(类名),在类的实现文件中定义宏, ...