js绘制地图简单示例

以你之姓@ 2021-06-24 15:59 1248阅读 0赞

#### js地图绘制： ####

1.准备一个简单的html文件，添加一个div，其id为"mapDiv"

<div id="mapDiv" style="position:absolute;width:800px; height:500px"></div>

2.引入地图的JavaScript API文件：

<script src="http://api.tianditu.com/api?v=4.0" type="text/javascript"></script>

3.创建地图对象

var map = new T.Map('mapDiv');

4.初始化坐标点对象，确定经纬度坐标和层级

var zoom = 12;
    var t = new T.LngLat(116.40769, 39.89945);

5.绘制地图

map.centerAndZoom(t, zoom);

**通过经纬度查询地图位置的示例如下：**

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <title>HELLO WORLD</title>
        <script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>
        <script>
            var map;               //地图对象123
            var zoom = 12;         //层级，值越大，地图范围越小
            var lon = 116.40769;   //经度
            var lat = 39.89945;    //纬度
            var t = new T.LngLat(lon, lat);
            function onLoad() {
                map = new T.Map('mapDiv');
                map.centerAndZoom(t, zoom);
            }
    
            function query(){
                lon = document.getElementById('lon').value;
                lat = document.getElementById('lat').value;
                if(lon == '' || lon == null) lon = 116.40769;
                if(lat == '' || lat == null) lat = 39.89945;
                t = new T.LngLat(lon, lat);
                map.centerAndZoom(t, zoom);
            }
        </script>
    </head>
    <body onLoad="onLoad()">
    <div>
    	经度：<input type='text' id='lon'/>    
    	纬度：<input type='text' id='lat'/>
    	<input type = 'button' value = '查询坐标点' onclick='query();'/>
    </div>
    <div id="mapDiv" style="position:absolute;width:800px; height:500px"></div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，1248人围观）

还没有评论，来说两句吧...

相关阅读

相关绘制中国地图

我可以提供一些建议来绘制中国地图： 1. 使用一个地图制图工具，如 Adobe Illustrator、GIS 或其他软件。 2. 找到一张中国地图的模板或轮廓图。 3.

深碍√TFBOYSˉ_/ 2024年03月26日 09:59/ 0 赞/ 75 阅读

相关绘制变形地图 Python

在这篇文章中，我将为您介绍如何使用Python绘制一个变形地图。这个地图将展示一个地区的特定特征，并使用颜色或其他视觉效果来表示不同的地理数据。首先，我们需要安装Pytho

野性酷女/ 2024年03月02日 09:11/ 0 赞/ 115 阅读

相关使用Python绘制世界地图示例

在本篇文章中，我们将使用Python编程语言和pygal模块来绘制一个世界地图示例。pygal是一个功能强大的Python图表库，它提供了丰富的绘图功能，包括绘制地图。首先

傷城~/ 2024年02月29日 01:11/ 0 赞/ 142 阅读

相关绘制中国热力地图

热力地图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

「爱情、让人受尽委屈。」/ 2023年07月18日 15:28/ 0 赞/ 14 阅读

相关 ECharts 地图绘制

地图模拟实例（数据不具真实性仅供学习）在绘制之前我们要了解一些Echarts的一些基本的组件： 1.geo geo 是 ECharts 图表的地理坐标系组件。

傷城~/ 2023年07月07日 05:49/ 0 赞/ 19 阅读

相关 JS百度地图简单配置

基础类： <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="te

小灰灰/ 2023年07月06日 09:49/ 0 赞/ 58 阅读

相关 Basemap绘制地图

文章转自：http://blog.csdn.net/ouening/article/details/55227364 使用folium实现中国地图绘制，文章链接： > [p

川长思鸟来/ 2022年05月29日 07:48/ 0 赞/ 473 阅读

相关 Highcharter绘制中国地图

刚发现segmantfault不支持iframe，绘图效果可以在这"[Highcharter绘制中国地图][Highcharter]"查看。 Highmaps数据在[

青旅半醒/ 2022年02月26日 15:11/ 0 赞/ 532 阅读

相关 arcgis js 简单示例

文章目录 4+版本参考文档基本型添加点线面添加多个点

快来打我*/ 2021年09月23日 11:46/ 0 赞/ 421 阅读

相关 js绘制地图简单示例

js地图绘制： 1.准备一个简单的html文件，添加一个div，其id为"mapDiv" <div id="mapDiv" style="position:ab

以你之姓@/ 2021年06月24日 15:59/ 0 赞/ 1249 阅读