天地图-第三篇-地图参数设置

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天地图-地图参数设置title>
    <style>
        /*设置地图显示大小*/
        #mapDiv{
            width: 600px;
            height: 400px;
        }
        span{
            padding: 10px;
        }
    style>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥">script>
    head>
    <body onLoad="onLoad()"> 
        
        <div id="mapDiv">div>
        <div>
            <span>设置经纬度及缩放级别:span>
            <span>经度span><input id="lng" type="text" value="116.64899">
            <span>纬度span><input id="lat" type="text" value="40.12948">
            <span>缩放级别span><input id="zoom" type="text" value="12">
            <input type="button" value="设置" onClick="setCenterAndZoom()"/>
        div>
        <hr />
        <div>
            <span>是否允许鼠标双击放大:span>
            <input type="button" onClick="map.enableDoubleClickZoom()" value="允许双击地图放大"/>
            <input type="button" onClick="map.disableDoubleClickZoom()" value="禁止双击地图放大"/>
        div>
        <hr />
        <div >
            <p>是否允许滚动鼠标滑轮缩放:p>
            <input type="button" onClick="map.enableScrollWheelZoom()" value="允许鼠标滚轮缩放地图"/>
            <input type="button" onClick="map.disableScrollWheelZoom()" value="禁止鼠标滚轮缩放地图"/>
        div>
        <hr />
        <div>
            <p>是否允许滚动鼠标惯性滑动:p>
            <input type="button" onClick="map.enableInertia()" value="允许鼠标地图惯性拖拽"/>
            <input type="button" onClick="map.disableInertia()" value="禁止鼠标地图惯性拖拽"/>
        div>
        <hr />
        <div>
            <p>是否允许键盘操作地图:(小键盘上的四个方向键,地图将向相应的方向移动一段距离;敲击大小键盘上的+、-两个键,地图将放大或缩小)p>
            <input type="button" id="button1" onClick="map.enableKeyboard()" value="允许键盘操作地图"/>
            <input type="button" id="button2" onClick="map.disableKeyboard()" value="禁止键盘操作地图"/>
        div>
        <hr />
        <div>
            <span>地图样式:span>
            <input type="button" onClick="map.setStyle('black')" value="block"/>
            <input type="button" onClick="map.setStyle('indigo')" value="indigo"/>
            <input type="button" onClick="map.removeStyle()" value="恢复默认"/>
        div>
        
    body>
    <script type="text/javascript">
        var map;
        var zoom = 12;    
        function onLoad() {
             //初始化地图对象
            map = new T.Map("mapDiv");
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
        }
        function setCenterAndZoom() {
            var lng = document.getElementById("lng").value;
            var lat = document.getElementById("lat").value;
            var zoom = document.getElementById("zoom").value;
            map.centerAndZoom(new T.LngLat(lng, lat), zoom);
        }
    script>
html>

直接上代码,不多哔哔

转载于:https://www.cnblogs.com/nuoye/p/10531488.html

你可能感兴趣的:(天地图-第三篇-地图参数设置)