Baidu 지도를 사용하여 지도 그리드를 구현한 사례 공유
최근에는 부동산 시각화 기능을 실현하기 위해 Baidu 지도를 사용하고 싶었습니다. 그래서 가장 기본적인 기능은 지도를 그리드로 만들어 다양한 지역의 부동산 분할을 실현하는 것입니다. 이 기사에서는 주로 Baidu 지도를 사용하는 예를 공유합니다. 많은 기능을 가지고 있는 지도 그리드를 구현해 보시기 바랍니다. 모두에게 도움이 되길 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
1. 비밀 키를 신청하려면 Baidu Maps의 공개 플랫폼으로 이동하세요. 여기에 내 비밀 키를 게시하겠습니다. ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4
2 아래에 나만의 페이지를 게시하겠습니다.
<!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"/>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4"></script>
<script type="text/javascript" src="ziroom-map.js"></script>
</head>
<body>
<p id="container"></p>
<script>
var myMap = new ZMap("container"); </script>
</body>
</html>3, 저희 회사 이름인 ziroom-map.js를 소개합니다. 이 js는 Baidu의 js api를 캡슐화한 이유가 무엇인지 직접 문의해 주시길 바랍니다. 그것을 사용하려면? 그렇다면 내 대답은 다음과 같습니다. 캡슐화는 특정 비즈니스와 지도를 결합하여 코드를 더 명확하게 만들고 현재 지도 상태를 유지할 수 있어 지도 운영에 도움이 됩니다.
var ZMap = function (id, center, level) {
this.initCenter = new ZPoint(116.404, 39.915);//初始化的中心点，同时为了定义网格的中心点
this.id = id;//p的id
this.level = level ? level : 13;//地图级别
this.center = center ? center : this.initCenter;//中心点
this.map = null;//百度地图实例
this.xgrids = [];//经线
this.ygrids = [];//纬线
this.beSelectBounds = {};
this.bounds = null;//当前地图的四个顶点
this.span = null;//当前网格的跨度
this.init();
}
ZMap.prototype = {
init: function () {//全局初始化
var zMap = this;
this.map = new BMap.Map(this.id);
this.map.centerAndZoom(this.center.point, this.level);
this.map.enableScrollWheelZoom();
this.map.disableInertialDragging();
this.map.addControl(new BMap.NavigationControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
type: BMAP_NAVIGATION_CONTROL_ZOOM
})); //缩放按钮
this.map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(80, 25)})); //比例尺
this.map.disableDoubleClickZoom();
this.map.setMapStyle({style: 'googlelite'});
this.initProperty();
this.initGrid();
//添加移动后的点击事件
this.map.addEventListener("dragend", function () {
zMap.initProperty();
zMap.initGrid();
});
//添加放大或缩小时的事件
this.map.addEventListener("zoomend", function () {
zMap.initProperty();
zMap.initGrid();
});
//设置点击事件
this.map.addEventListener("click", function (e) {
var point = e.point;
//获取当前点是在哪个区块内,获取正方形的四个顶点
var points = zMap.getGrid(point);
//判断当前区域是否已经被选中过，如果被选中过则取消选中
var key = '' + points[0].lng + points[0].lat + points[2].lng + points[2].lat;//使用两个点的坐标作为key
if (zMap.beSelectBounds[key]) {
zMap.map.removeOverlay(zMap.beSelectBounds[key]);
delete zMap.beSelectBounds[key];
return;
}
var polygon = new BMap.Polygon(points, {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5});
zMap.map.addOverlay(polygon);
zMap.beSelectBounds[key] = polygon;
});
},
initProperty: function () {//初始化当前地图的状态
this.level = this.map.getZoom();
this.bounds = {
x1: this.map.getBounds().getSouthWest().lng,
y1: this.map.getBounds().getSouthWest().lat,
x2: this.map.getBounds().getNorthEast().lng,
y2: this.map.getBounds().getNorthEast().lat
};
this.span = this.getSpan();//需要使用level属性
},
initGrid: function () {//初始化网格
var zMap = this;
//将原来的网格线先去掉
for (var i in zMap.xgrids) {
this.map.removeOverlay(zMap.xgrids[i]);
}
zMap.xgrids = [];
for (var i in zMap.ygrids) {
this.map.removeOverlay(zMap.ygrids[i]);
}
zMap.ygrids = [];
//获取当前网格跨度
var span = zMap.span;
//初始化地图上的网格
for (var i = zMap.bounds.x1 + (zMap.initCenter.point.lng - zMap.bounds.x1) % span.x - span.x; i < zMap.bounds.x2 + span.x; i += span.x) {
var polyline = new BMap.Polyline([
new BMap.Point(i.toFixed(6), zMap.bounds.y1),
new BMap.Point(i.toFixed(6), zMap.bounds.y2)
], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
zMap.xgrids.push(polyline);
zMap.map.addOverlay(polyline);
}
for (var i = zMap.bounds.y1 + (zMap.initCenter.point.lat - zMap.bounds.y1) % span.y - span.y; i < zMap.bounds.y2 + span.y; i += span.y) {
var polyline = new BMap.Polyline([
new BMap.Point(zMap.bounds.x1, i.toFixed(6)),
new BMap.Point(zMap.bounds.x2, i.toFixed(6))
], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
zMap.ygrids.push(polyline);
zMap.map.addOverlay(polyline);
}
},
getSpan: function () {//获取网格的跨度
var scale = 0.75;
var x = 0.00064;
for (var i = this.level; i < 19; i++) {
x *= 2;
}
var y = parseFloat((scale * x).toFixed(5));
return {x: x, y: y};
},
getGrid: function (point) {//返回当前点在所在区块的四个顶点
var zMap = this;
//先找出两条纵线坐标
var xpoints = this.xgrids.map(function (polyline) {
return polyline.getPath()[0].lng;
}).filter(function (lng) {
return Math.abs(lng - point.lng) <= zMap.span.x;
}).sort(function (a, b) {
return a - b;
}).slice(0, 2);
//再找出两条横线的坐标
var ypoints = this.ygrids.map(function (polyline) {
return polyline.getPath()[0].lat;
}).filter(function (lat) {
return Math.abs(lat - point.lat) <= zMap.span.y;
}).sort(function (a, b) {
return a - b;
}).slice(0, 2);
return [
new BMap.Point(xpoints[0], ypoints[0]),
new BMap.Point(xpoints[0], ypoints[1]),
new BMap.Point(xpoints[1], ypoints[1]),
new BMap.Point(xpoints[1], ypoints[0])
];
},
reset: function () {//重置
this.map.reset();
}
}
var ZPoint = function (x, y, code) {
this.code = code;
this.point = new BMap.Point(x, y);
}관련 권장 사항:
위 내용은 Baidu 지도를 사용하여 지도 그리드를 구현한 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
iPhone에서 Google 지도를 기본 지도로 설정하는 방법
Apr 17, 2024 pm 07:34 PM
iPhone의 기본 지도는 Apple의 독점 위치 정보 제공업체인 지도입니다. 지도가 점점 좋아지고 있지만 미국 이외의 지역에서는 잘 작동하지 않습니다. Google 지도와 비교하면 아무것도 제공할 수 없습니다. 이 기사에서는 Google 지도를 사용하여 iPhone의 기본 지도로 만드는 실행 가능한 단계에 대해 설명합니다. iPhone에서 Google 지도를 기본 지도로 설정하는 방법 Google 지도를 휴대전화의 기본 지도 앱으로 설정하는 것은 생각보다 쉽습니다. 아래 단계를 따르십시오. – 전제 조건 단계 – 휴대폰에 Gmail이 설치되어 있어야 합니다. 1단계 – AppStore를 엽니다. 2단계 – “Gmail”을 검색하세요. 3단계 - Gmail 앱 옆을 클릭하세요.
2개월 만에 휴머노이드 로봇 '워커S' 옷 개기 가능
Apr 03, 2024 am 08:01 AM
기계력 보고서 편집자: 우신(Wu Xin) 국내판 휴머노이드 로봇+대형 모델팀이 옷 접기 등 복잡하고 유연한 재료의 작업 작업을 처음으로 완료했습니다. OpenAI 멀티모달 대형 모델을 접목한 Figure01이 공개되면서 국내 동종업체들의 관련 진전이 주목받고 있다. 바로 어제, 중국의 "1위 휴머노이드 로봇 주식"인 UBTECH는 Baidu Wenxin의 대형 모델과 긴밀하게 통합되어 몇 가지 흥미로운 새로운 기능을 보여주는 휴머노이드 로봇 WalkerS의 첫 번째 데모를 출시했습니다. 이제 Baidu Wenxin의 대형 모델 역량을 활용한 WalkerS의 모습은 이렇습니다. Figure01과 마찬가지로 WalkerS는 움직이지 않고 책상 뒤에 서서 일련의 작업을 완료합니다. 인간의 명령을 따르고 옷을 접을 수 있습니다.
바이두 아폴로, L4 자율주행을 지원하는 세계 최초 대형 모델 '아폴로 ADFM' 출시
Jun 04, 2024 pm 08:01 PM
5월 15일, Baidu Apollo는 우한 Baidu Carrot Auto Robot Zhixing Valley에서 Apollo Day 2024를 개최하여 지난 10년 동안 Baidu의 자율 주행 분야의 주요 발전을 종합적으로 시연하고 대형 모델을 기반으로 한 기술 도약과 승객 안전에 대한 새로운 정의를 가져왔습니다. 세계 최대 자율주행차 운영 네트워크 바이두는 사람이 운전하는 것보다 자율주행을 더 안전하게 만들었습니다. 덕분에 더 안전하고, 더 편안하고, 친환경적이고, 저탄소 여행 방식이 이상에서 현실로 바뀌고 있습니다. 바이두 그룹 부사장이자 지능형 운전 비즈니스 그룹 사장인 왕윤펑(Wang Yunpeng)은 현장에서 "자율주행차를 만드는 우리의 원래 의도는 더 나은 여행에 대한 사람들의 점점 커지는 갈망을 충족시키는 것입니다. 사람들의 만족은 우리의 원동력입니다. 왜냐하면 안전, 너무 아름다워요, 만나서 반가워요
Xiaohongshu 지도에 매장 주소를 추가하는 방법은 무엇입니까? 매장 주소 설정은 어떻게 입력하나요?
Mar 29, 2024 am 09:41 AM
샤오홍슈가 젊은이들 사이에서 점점 더 인기를 끌면서 샤오홍슈에 매장을 오픈하는 사람들도 점점 더 많아지고 있습니다. 많은 초보 판매자들이 매장 주소를 설정할 때 어려움을 겪고 있으며 매장 주소를 지도에 추가하는 방법을 모릅니다. 1. 샤오홍슈 지도에 매장 주소를 추가하는 방법은 무엇인가요? 1. 먼저 귀하의 매장이 Xiaohongshu에 등록된 계정이 있고 성공적으로 매장을 오픈했는지 확인하세요. 2. Xiaohongshu 계정에 로그인하고 스토어 백엔드에 들어가서 "스토어 설정" 옵션을 찾으세요. 3. 스토어 설정 페이지에서 "스토어 주소" 열을 찾아 "주소 추가"를 클릭하세요. 4. 팝업되는 주소 추가 페이지에서 시, 군, 군, 거리, 집번호 등 매장의 상세 주소 정보를 입력합니다. 5. 입력 후 '추가 확인' 버튼을 클릭하세요. Xiaohongshu가 주소를 알려드릴 것입니다.
Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법
Mar 24, 2024 pm 06:03 PM
Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 소셜 소프트웨어의 인기와 개인 정보 보호 및 보안에 대한 사람들의 강조가 높아지면서 WeChat 복제 기능이 점차 주목을 받고 있습니다. WeChat 복제 기능을 사용하면 사용자가 동일한 휴대폰에서 여러 WeChat 계정에 동시에 로그인할 수 있으므로 관리 및 사용이 더 쉬워집니다. Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 것은 어렵지 않습니다. 다음 단계만 따르면 됩니다. 1단계: 휴대폰 시스템 버전과 WeChat 버전이 요구 사항을 충족하는지 확인하십시오. 먼저 Huawei 휴대폰 시스템 버전과 WeChat 앱이 최신 버전으로 업데이트되었는지 확인하세요.
Google 지도에서 한눈에 길찾기를 이용하는 방법
Jun 13, 2024 pm 09:40 PM
출시 1년 만에 Google 지도에 새로운 기능이 출시되었습니다. 지도에 목적지까지의 경로를 설정하면 여행 경로가 요약되어 표시됩니다. 여행이 시작되면 휴대전화의 잠금 화면에서 경로 안내를 '찾아보기'할 수 있습니다. Google 지도를 사용하여 예상 도착 시간과 경로를 확인할 수 있습니다. 여행 내내 잠금 화면에서 내비게이션 정보를 볼 수 있으며, 휴대폰 잠금을 해제하면 Google 지도에 액세스하지 않고도 내비게이션 정보를 볼 수 있습니다. 휴대전화를 잠금 해제하면 Google 지도에 액세스하지 않고도 내비게이션 정보를 볼 수 있습니다. 휴대전화를 잠금 해제하면 Google 지도에 액세스하지 않고도 내비게이션 정보를 볼 수 있습니다. 휴대전화를 잠금 해제하면 Google 지도에 액세스하지 않고도 내비게이션 정보를 볼 수 있습니다. Google 지도에 접속하지 않고도 내비게이션 정보를 볼 수 있습니다.
Baidu Robin Li는 팀을 이끌고 PetroChina를 방문하여 석유 및 가스 산업의 정보를 논의했습니다.
May 07, 2024 pm 06:13 PM
7일 해당 사이트 소식에 따르면 지난 5월 6일 바이두 창업자이자 회장 겸 CEO인 로빈 리가 팀을 이끌고 베이징에 있는 중국국영석유공사(이하 '페트로차이나')를 방문해 중국 국영기업 이사들을 만났다. 중국국영석유공사(China National Petroleum Corporation) 회장 겸 당 서기 Dai Houliang이 회담을 가졌습니다. 양측은 협력을 강화하고 에너지 산업과 디지털 인텔리전스의 심층적 통합을 촉진하기 위해 심도 있는 교류를 가졌습니다. PetroChina는 디지털 China Petroleum Corporation의 건설을 가속화하고 Baidu Group과의 협력을 강화하며 에너지 산업과 디지털 인텔리전스의 심층적 통합을 촉진하고 국가 에너지 안보 보장에 더 큰 기여를 할 것입니다. 로빈 리(Robin Li)는 대형 모델이 보여주는 '지능적 출현'과 이해, 생성, 논리, 기억의 핵심 역량이 첨단 기술과 석유 및 가스 사업의 결합을 위한 더 넓은 상상력의 공간을 열었다고 말했습니다. 언제나
DeepSeek 웹 버전 입구 DeepSeek 공식 웹 사이트 입구
Feb 19, 2025 pm 04:54 PM
DeepSeek은 웹 버전과 공식 웹 사이트의 두 가지 액세스 방법을 제공하는 강력한 지능형 검색 및 분석 도구입니다. 웹 버전은 편리하고 효율적이며 설치없이 사용할 수 있습니다. 개인이든 회사 사용자이든, DeepSeek를 통해 대규모 데이터를 쉽게 얻고 분석하여 업무 효율성을 향상시키고 의사 결정을 지원하며 혁신을 촉진 할 수 있습니다.
