腾讯地图JavaScript API调用

外科学博导 發表於 2019-7-27 20:59:00

<h1 style="text-align: center">腾讯地图JavaScript API调用</h1>
<h2>1、加载地图 API</h2>
<h4>页面直接引入</h4>
<div class="cnblogs_code">
<pre><script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script></pre>
</div>
<p>https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 网址是API文件的位置，v2.0 指当前使用的API的版本标识，key=[申请的开发密钥]</p>
<h2>2、创建一个容纳地图的div容器</h2>
<div class="cnblogs_code">
<pre><div id="container" style="width:500px; height:300px"></div></pre>
</div>
<p>要使地图在网页上显示，必须为其在网页中创建一个容器。通常，我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。</p>
<p>在上述示例中，我们定义名为 "container" 的 div，并使用样式属性设置其尺寸。<strong>地图会自动使用容器尺寸调整自身的尺寸</strong>。</p>
<h2>3、地图基本对象</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> map = <span style="color: rgba(0, 0, 255, 1)">new</span> qq.maps.Map(document.getElementById('container'),myoptions);</pre>
</div>
<p>表示地图的 JavaScript 类是 Map 类。此类的对象在页面上定义单个地图。我们使用 JavaScript new 操作符创建此类的一个新实例。当创建新的地图实例时，在页面中指定一个 DOM 节点（通常是 div 元素）作为地图的容器。HTML 节点是 JavaScript document 对象的子节点，我们通过document.getElementById() 方法获取对此元素的引用。此代码定义一个全局变量（名为map），并将该变量分配给新的 Map 对象。函数 Map() 称为构造函数，其定义请参考《参考手册》</p>
<p>myoptions 是地图的配置对象。</p>
<h2>4、初始化地图</h2>
<div class="cnblogs_code">
<pre>map.panTo(<span style="color: rgba(0, 0, 255, 1)">new</span> qq.maps.LatLng(39.916527,116.397128));</pre>
</div>
<p>通过 Map 构造函数创建地图之后，还需要执行一个操作，即将其初始化。初始化通过地图的 panTo() 方法完成。panTo() 方法需要LatLng 经纬度坐标，并且调用此方法必须在对地图执行任何其它操作（包括设置地图本身的任何其它属性）之前。</p>
<p>LatLng  是 latitude 经度 Longitude 纬度  缩写</p>
<h2>5、加载地图</h2>
<div class="cnblogs_code">
<pre><body onload="init()"></pre>
</div>
<p>当 HTML 页面显示时，文档对象模型 (DOM) 即会扩展，接收其他外部图像和脚本并将其合并到 document 对象中。<strong>为了确保只有在完全加载页面后才将我们的地图放在页面上</strong>，我们仅在 HTML 页面的元素收到 onload 事件后才执行构造 Map 的函数。这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。body 标签的 onload 属性是事件处理程序的一个示例。腾讯 Maps Javascript API 还提供了一组事件，可供您进行处理以确定状态变化。有关详细信息，请参阅地图事件部分。</p>
<p> </p>
<p>参考案例1：</p>
<div class="cnblogs_code"><img id="code_img_closed_f1d870fb-21e4-4a16-9992-83297f10b3d3" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_f1d870fb-21e4-4a16-9992-83297f10b3d3" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_f1d870fb-21e4-4a16-9992-83297f10b3d3" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简单地图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css"><span style="color: rgba(0, 0, 0, 1)">
   html,body{
         width:</span>100%<span style="color: rgba(0, 0, 0, 1)">;
         height:</span>100%<span style="color: rgba(0, 0, 0, 1)">;
   }
   </span>*<span style="color: rgba(0, 0, 0, 1)">{
         margin:0px;
         padding:0px;
   }
   body, button, input, select, textarea {
         font: 12px</span>/16px Verdana, Helvetica, Arial, sans-serif;
<span style="color: rgba(0, 0, 0, 1)">    }
   p{
         width:603px;
         padding</span>-<span style="color: rgba(0, 0, 0, 1)">top:3px;
         overflow:hidden;
   }
   .btn{
         width:142px;
   }
   #container{
         min</span>-<span style="color: rgba(0, 0, 0, 1)">width:600px;
         min</span>-<span style="color: rgba(0, 0, 0, 1)">height:767px;
   }
</span></style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script><span style="color: rgba(0, 0, 0, 1)">
   window.onload </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">直接加载地图</span>
         <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">初始化地图函数自定义函数名init</span>
         <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> init() {
            </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定义map变量调用 qq.maps.Map() 构造函数获取地图显示容器</span>
            <span style="color: rgba(0, 0, 255, 1)">var</span> map = <span style="color: rgba(0, 0, 255, 1)">new</span> qq.maps.Map(document.getElementById("container"<span style="color: rgba(0, 0, 0, 1)">), {
               center: </span><span style="color: rgba(0, 0, 255, 1)">new</span> qq.maps.LatLng(39.916527,116.397128),    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 地图的中心地理坐标。latitude 经度 Longitude 纬度</span>
               zoom:8                                              <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 设置缩放级别</span>
<span style="color: rgba(0, 0, 0, 1)">             });
         }
         </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">调用初始化函数地图,可以写在body中 <body onload="init()"></span>
         <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> init();</span>

         <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
         * function init() {
               var myLatlng = new qq.maps.LatLng(-34.397, 150.644);
               var myOptions = {
               zoom: 8,
               center: myLatlng,
               mapTypeId: qq.maps.MapTypeId.ROADMAP
               }
               var map = new qq.maps.Map(document.getElementById("container"), myOptions);
         }
         * </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
   }
</span></script>
</head>
<body onload="init()">

<div id="container"></div>
</body>
</html></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p> </p>
<h1 style="text-align: center">地图事件</h1>
<p>腾讯地图API具有事件接口，用户可以根据各自不同的需求添加不同的事件扩展。</p>
<p>目前腾讯地图提供的事件类型有两类:</p>
<ol>
<li>用户事件（如“点击地图”鼠标事件）是从 DOM 传播到腾讯 Maps API 中的。这些事件是独立的，并且与标准 DOM 事件不同。包括：<strong>单击事件(click)、双击事件(dblclick)、鼠标滑过事件(mouseover)、鼠标移动(mousemove)</strong>等；</li>
<li>腾讯地图API特有的事件，MVC 状态更改通知反映了腾讯Maps API 对象中的更改，并以 property_changed 惯例命名。如：缩放级别更改事件(zoom_changed)、内容更改事件(content_changed)等。</li>
</ol>
<h2>1、添加地图点击事件</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> listener =<span style="color: rgba(0, 0, 0, 1)"> qq.maps.event.addListener(
map,
</span>'click'<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
   alert(</span>'您点击了地图。'<span style="color: rgba(0, 0, 0, 1)">);
}
);</span></pre>
</div>
<p> </p>
<p>使用qq.maps.event.addListener() 可以将事件绑定到某一个对象上，返回一个监听者对象。方法<strong>第一个参数为被绑定事件的对象，第二个参数为事件类型，第三个参数为事件的处理方法</strong>。</p>
<h2>2、事件中获取参数</h2>
<p>addListener() 在事件被触发时会将 DOM 事件对象传入事件的处理方法，并在<strong>事件对象中添加鼠标当前位置的地理坐标属性 LatLng</strong>。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">qq.maps.event.addListener(
map,
</span>'click'<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(event) {
   console.log(</span>'经度',event.latLng.lat,' 纬度:'<span style="color: rgba(0, 0, 0, 1)">,event.latLng.lng);
}
);</span></pre>
</div>
<p> </p>
<h2>3、移除事件</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> listener =<span style="color: rgba(0, 0, 0, 1)"> qq.maps.event.addListener(
map,
</span>'click'<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
   alert(</span>'您点击了地图。'<span style="color: rgba(0, 0, 0, 1)">);
}
);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">移除 click 事件.</span>
qq.maps.event.removeListener(listener);</pre>
</div>
<h1 style="text-align: center">地图控件</h1>
<p>腾讯地图API控件是用户与地图交互的 UI 元素。API提供多样的控件便于用户直接使用，并提供自定义控件 Control，最大限度满足用户需求。</p>
<p>目前腾讯地图API中提供的控件有：</p>
<ol>
<li>导航控件</li>
<li>比例尺控件</li>
<li>自定义控件等</li>
</ol>
<h2>1、向地图添加控件</h2>
<p>在地图上添加一个比例尺控件，并将控件放置在地图的左下角，可在代码中添加如下内容：</p>
<h3>添加比例尺控件</h3>
<div class="cnblogs_code">
<pre>map = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> qq.maps.Map(
document.getElementById(</span>"container"<span style="color: rgba(0, 0, 0, 1)">),
{
   center: </span><span style="color: rgba(0, 0, 255, 1)">new</span> qq.maps.LatLng(39.914850, 116.403765<span style="color: rgba(0, 0, 0, 1)">),
   zoom: </span>13<span style="color: rgba(0, 0, 0, 1)">
}
);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> scaleControl = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> qq.maps.ScaleControl({
align: qq.maps.ALIGN.BOTTOM_LEFT,
margin: qq.maps.Size(</span>85, 15<span style="color: rgba(0, 0, 0, 1)">),
map: map
});</span></pre>
</div>
<h1 style="text-align: center">地图覆盖物</h1>
<p>覆盖物是指覆盖到地图上面的所有事物。覆盖物都有自己的地理属性，<strong>通过设置地理属性来控制覆盖物在地图中的显示位置</strong>。</p>
<p>腾讯地图API中的主要包括的覆盖物有：</p>
<ul>
<li>标注</li>
<li>折线</li>
<li>多边形</li>
<li>圆形</li>
<li>信息窗口等</li>
</ul>
<p> </p><br><br>
来源：https://www.cnblogs.com/XJT2018/p/11255921.html

頁: [1]

琼殿技术论坛's Archiver

腾讯地图JavaScript API调用