- 使用第三方库：
leaflet，openlayers，mapbox，baidu；
可能mapbox更优秀一些；
- leaflet 示例：
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 远程资源 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/leaflet/1.2.0/leaflet.css" />
<script src="https://cdn.bootcss.com/leaflet/1.2.0/leaflet.js"></script>
<!-- 本地资源 -->
<!--
<link rel="stylesheet" href="../docs/lib/leaflet.css" tppabs="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="../docs/lib/leaflet.js" tppabs="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
-->
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px"></div>
<script>
var mymap = L.map('mapid').setView([31.505, 113.09], 11);
L.tileLayer("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}").addTo(mymap);
L.marker([31.5, 113.09]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([31.508, 113.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
// 线
var latlngs =[[31.509, 113.08],[32.509, 113.08],[32.509, 115.08]]
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(mymap);
L.polygon([
[31.509, 113.08],
[31.503, 113.06],
[31.51, 113.047]
]).addTo(mymap).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
</script>
</body>
</html>
- 参考：
http://www.mapbox.cn/
http://www.mapbox.cn/mapbox-gl-js/example/popup-on-click/
https://www.mapbox.com/
OpenLayers 官网例子的中文详解 https://segmentfault.com/a/1190000009679800
https://openlayers.org/en/latest/examples/vector-layer.html
https://leafletjs.com/
https://leafletjs.com/examples.html
https://leafletjs.com/examples/quick-start/
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/infoWindow
https://lbsyun.baidu.com/jsdemo.htm#webgl1_4
网友评论