Openlayers之显示地理位置坐标

最新推荐文章于 2025-07-13 23:53:34 发布

原创

最新推荐文章于 2025-07-13 23:53:34 发布 · 6.1k 阅读

11 ·

CC 4.0 BY-SA版权

1、新建一个html页面，引入ol.js和ol.css文件，然后在body中创建两个div标签，分别用来作为地图和鼠标位置控件的容器；

2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../lib/ol/ol.js"></script>
    <link href="../css/ol.css" rel="stylesheet" />
    <style type="text/css">
        #myposition
        {
            float:left;
            position:absolute;
            bottom:10px;
            width:400px;
            height:20px;
            z-index:2000;
        }
        .mosuePosition
        {
            color:blue;
            font-size:20px;
            font-family:'微软雅黑