本文只要涉及的内容有,web中动态引入百度地图,基于百度地图的本地搜索(公交,地铁,停车场),自定义marker,layer,接入微信内置地图(微信中使用第三方导航)。
本示例应用于小程序内嵌的webview,web开发使用react。由于示例作为项目中的一个不必要模块,不是每次进入都会加载,因此选择在项目确定使用百度地图时,在进行加载。即动态加载百度地图的地图服务资源(代码直接从网上copy了一个):
MP(ak) {
return new Promise(resolve=> {
const script = document.createElement("script");
script.type = "text/javascript";
script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`;
document.head.appendChild(script);
window.init = () => {
resolve(window.BMap);
};
});
}
openBMap() {
this.MP("你的ak").then(BMap => {
this.bmap = new BMap.Map("allmap"); // 创建Map实例
const mPoint = new BMap.Point(103.96120956167579, 30.67880629052847);
this.bmap.enableScrollWheelZoom();
this.bmap.centerAndZoom(mPoint, 15);
const options = {
onSearchComplete: (results) => {
if (local.getStatus() == BMAP_STATUS_SUCCESS) {
this.searchResults = results;
this.generateMarker(0); // 生成marker
}
}
};
const local = new BMap.LocalSearch(this.bmap, options);
//
local.searchNearby(["公交站", "地铁站", "停车场"], mPoint, 1200);
});
}
local.searchNearby 为搜索附近api,搜索参数依次为搜索内容(string| arr["obj"]),搜索中心点,搜索范围。详细参考:http://lbsyun.baidu.com/cms
这个比较简单,直接参考官方demo。先生成Icon,然后将icon传入marker。
const myIcon = new BMap.Icon(imgUrl, new BMap.Size(40, 40));
const marker = new BMap.Marker(this.searchResults[index].Ar[i].point, {icon: myIcon});
marker.addEventListener("click", (e) => {
this.filterMarker(e.target.point, index);
});
this.bmap.addOverlay(marker);
这个就麻烦一点了。
因为之前有使用mapbox的经验,所以最初的思路是直接在生成的marker上添加一个popup,适当做一些偏移。但是百度地图跟marker直接做关联的只有一个信息窗口,即InfoWindow。当时这里花费了比较多的时间去改样式,主要参考了这篇文章,但是改出来的效果并不太好,可能sdk的版本不太一样吧。于是乎才选择了百度地图的自定义图层,但是这个图层无法直接跟marker关联,所以只能去获取marker的坐标,再去把图层先是至相关位置点。
自定义图层参考demo:http://lbsyun.baidu.com/jsdem
将marker与自定义图层关联起来,主要依靠
pt: marker 坐标
this.bmap: 地图实例
const clickMarker = this.searchResults.Ar.filter((v, i) => {
if (v.point.lng == pt.lng && v.point.lat == pt.lat) {
clickIndex = i;
}
return v.point.lng == pt.lng && v.point.lat == pt.lat;
});
marker 的过滤主要依赖点击获取的经纬度,与初始搜索存储的marker列表进行对比。(点击事件中未找到uid,故对比经纬度)。
将得到的点击marker 中的信息传入图层,在marker点击事件中注册 地图的移动事件,即 this.bmap.panTo(pt); 保证每次点击marker 将地图移至中心。
在小程序中通过,openLocation 来打开微信内置地图,这里有两个点要注意。一是小程序的openLocation 接受的经纬度必须是number,即:
wx.openLocation({
latitude: +gcjPoint[1],
longitude: +gcjPoint[0],
name: destination.title,
address: destination.address,
scale: 18
});
第二点是腾讯(国内)地图接受的坐标都是gcj02(火星坐标),如果传入wgs84(全球坐标)会存在一定距离的偏差。这里把网上的一段wgs84 转 gcj02 代码用es6 重写了一遍。
class Wgs2Gcj {
a = 6378245.0;
ee = 0.00669342162296594323;
constructor(wgLon, wgLat) {
this.wgLat = wgLat;
this.wgLon = wgLon;
}
outOfChina(lon, lat) {
if (lon < 72.004 || lon > 137.8347)
return true;
if (lat < 0.8293 || lat > 55.8271)
return true;
return false;
}
transform() {
if (this.outOfChina(this.wgLon, this.wgLat)) {
return [this.wgLon, this.wgLat];
}
let dLat = this.transformLat(this.wgLon - 105.0, this.wgLat - 35.0);
let dLon = this.transformLon(this.wgLon - 105.0, this.wgLat - 35.0);
let radLat = this.wgLat / 180.0 * Math.PI;
let magic = Math.sin(radLat);
magic = 1 - this.ee * magic * magic;
let sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtMagic) * Math.PI);
dLon = (dLon * 180.0) / (this.a / sqrtMagic * Math.cos(radLat) * Math.PI);
let mgLat = this.wgLat + dLat;
let mgLon = this.wgLon + dLon;
return [mgLon, mgLat];
}
transformLat(x, y) {
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;
return ret;
};
transformLon(x, y) {
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;
return ret;
};
}
调用方法:
const gcjPoint = new Wgs2Gcj(destination.point.lng, destination.point.lat).transform();
来自:https://blog.csdn.net/j_bleach/article/details/93194464
说到地图,目前中国最常用的两个地图软件一般就是高德地图和百度地图了, 这篇文章主要介绍js中高德与百度地图坐标互相转换的实现
一些做SEO网站优化的朋友经常听到“站点地图”这个词。那么什么是站点地图呢?我们能做什么?我们应该如何制作和查看一个网站的地图?用来方便我们网站的用户和搜索引擎的蜘蛛,更好地阅读我们的网站页面。
最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过。就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上。当然,百度地图的画线就是这样实现的,但是好多人会发现
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!