标签：map geocoder mapbox mapboxgl import gl 高德
1.index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>坐标拾取器</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="map"></div>
<div id="geocoder" class="geocoder"></div>
<div id="myPageTop" style="display: block; width: 100%; height: 120px; background: #797373;">
<table id="myLngLat" style="display: block; position: absolute; margin-left: 900px;; top: 10px ;">
<tbody >
<tr>
<td >
<label id="copyLngLatTips" style="color :#f55159;font-size: 16px; ">点击地图，拾取经纬度</label>
</td>
</tr>
<tr>
<td>
<input type="text" id="txtCoordinate" style="font-size: 24px; width:500px; height: 60px;" readonly>
<button type="button" id="copyLngLat" style="font-size: 20px; height: 60px; width: 100px; margin-left: 20px; background-color: #5068f0; color: #fdfdfd; border-width: 0px ;" >复制</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--右下角地图样式切换-->
<div id="style-switcher"></div>
<!--左下鼠标经纬度信息-->
<pre id="mouseCoordinates"></pre>
<!--左下角可移动marker信息-->
<pre id="markerCoordinates" class="markerCoordinates"></pre>
<!--左下角draw的信息-->
<pre id="drawCalculated" class="drawCalculated">
<div id="calculated-area"></div>
</pre>
</body>
</html>2.index.js
import $ from "jquery";
import { basic,basic2,dark,liberty,liberty3d, asia, raster_asia, raster_basic, raster_basic2,raster_liberty, gzimg,gdimg,ygaimg } from './styles.js';
import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import { esGeocoder } from './myGeocoder.js';
import * as MapboxFPS from './MapboxFPS.min.js';
import { MapboxStyleSwitcherControl } from "mapbox-gl-style-switcher";
import RulerControl from 'mapbox-gl-controls/lib/ruler';
import * as turf from '@turf/turf';
import * as d3 from 'd3';
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
// import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
// import '../../node_modules/bootstrap/dist/js/bootstrap.min.js';
import '../css/myTheme.css';
var isSupported = require('@mapbox/mapbox-gl-supported')();
mapboxgl.accessToken = 'pk.eyJQ.mMpV7HEFSLA';
if (isSupported){
var map = new mapboxgl.Map({
container: 'map',
style: basic,
center: [113.354, 23.3478], // starting position [lng, lat]
zoom: 9,
maxZoom:22,
antialias:true, //抗锯齿，消耗性能
keyboard:false, // 关闭键盘快捷键
crossSourceCollisions:true, //是否进行跨图层符号的碰撞检测。
hash:true, //显示url的锚
attributionControl:true,
localFontFamily: true // 让中文字体里面的数字和中文对齐 V2.1.1增加的选项
});
} else {
alert("你的浏览器不支持webGL!");
console.log("你的浏览器不支持webGL!");
};
// FPS控件 帧率监控控件
var fpsControl = new MapboxFPS.FPSControl();
map.addControl(fpsControl,'top-right');
// 添加相关的地图控件
map.addControl(new mapboxgl.FullscreenControl(),'top-right');
map.addControl(new mapboxgl.NavigationControl());
const scale = new mapboxgl.ScaleControl({
maxWidth: 80,
unit: 'imperial'
});
map.addControl(scale);
scale.setUnit('metric');
map.addControl(new mapboxgl.AttributionControl({
customAttribution:'@2021 '
}));
// geocoder
const geocoder = new MapboxGeocoder(
{
accessToken: mapboxgl.accessToken ,
minLength:2,
limit:12,
types:'address',
zoom:19,
//localGeocoderOnly:true,
localGeocoder: esGeocoder,
//externalGeocoder: esGeocoder,
collapsed:false,
enableEventLogging:false,
placeholder:'输入关键字 or 经纬度 如 113.258 23.456',
mapboxgl: mapboxgl
}
);
// geocoder.addTo('#geocoder');
// map.addControl(geocoder,'top-left');
// 坐标拾取器专用
document.getElementById('geocoder').appendChild(geocoder.onAdd(map));
// 显示鼠标移动的经纬度
map.on('mousemove', function(e) {
document.getElementById('mouseCoordinates').innerHTML =
// e.point is the x, y coordinates of the mousemove event relative
// JSON.stringify(data) 是将对象转换为JSON字符串，JSON.parse()是把JSON字符串转换一个对象。
JSON.stringify(e.point) +
'<br />' +
// e.lngLat is the longitude, latitude geographical position of the event
JSON.stringify(e.lngLat.wrap());
});
var marker = new mapboxgl.Marker({}).setLngLat([0,0]).addTo(map);
map.on('click',function(e){
console.log('click event has occured at ' + e.lngLat);
marker.setLngLat(e.lngLat);
let x = e.lngLat.lng;
let y = e.lngLat.lat;
document.getElementById('txtCoordinate').value = x + ','+y ;
document.getElementById('copyLngLatTips').innerHTML = '经纬度获取结果：';
document.getElementById('copyLngLatTips').style.color ='#3710c5';
});
$('#copyLngLat').click(function(){
var ccc = document.getElementById('txtCoordinate').select();
document.execCommand("COPY");
document.getElementById('copyLngLatTips').innerHTML = '经纬度复制成功！';
document.getElementById('copyLngLatTips').style.color ='#58ec65';
})
// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on('click', 'mlp_circle', function(e) {
let coordinates = e.features[0].geometry.coordinates.slice();
let description = '<h1 style="text-align: center">'+'<strong>'+'详情'+'</strong>'+'</h1>' +'<br/>'
+'<h2>'+'<strong>'+'全称：'+'</strong>'+e.features[0].properties.DZQC +'</h2>'
+'<h2>'+'<strong>'+'代码：'+'</strong>'
+'<strong>'+e.features[0].properties.DZDM+'</strong>'+'</h2>'+'<br/>';
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup({maxWidth:'900px'})
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'mlp_circle', function() {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'mlp_circle', function() {
map.getCanvas().style.cursor = '';
});
3.css样式
body { margin: 0; padding: 0; }
#header {position: absolute;top: 0; width: 100%; height: 0px; background: #666699 }
#map { position: absolute; top: 0px; bottom: 0; width: 100%; }
/***
坐标拾取器专用
***/
.geocoder {
position: absolute;
z-index: 1 ;
width: 30%;
margin-left: 30px;
top: 40px;
}
.mapboxgl-ctrl-geocoder {
min-width: 100%;
}
#map {
margin-top: 120px;
}
标签：map,geocoder,mapbox,mapboxgl,import,gl,高德 来源： https://blog.csdn.net/aganliang/article/details/117633522
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。