查看: 79|回复: 1

jQuery基于高德地图api开发实例

[复制链接]

1

主题

3

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2022-12-12 14:11:13 | 显示全部楼层 |阅读模式
日常写代码我们经常会用到地图,目前比较常用的api主要是百度地图api和高德地图api,两者针对地图中参数的设置基本上是大同小异,本文会以高德地图api为例,粗略的说明一些常用的地图参数设置。


这里我会详细的介绍地图的引入以及地图的参数配置:
一、申请JSAPI的开发者Key并引入到页面中
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=c93e1e293e5b1c3dc581f3ff633144d3&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Walking,AMap.Riding"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
在页面中引入高德地图,key值可以自己免费申请。因为是基于JQuery所以必须先引入JQ。
二、页面中创建地图容器并设置大小
    <div id="container"></div>       在html种创建地图容器并给容器设置大小,准备工作完成之后,就可以开始创建地图了。
三、创建地图并设置参数
     初始化地图
     var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 15,
        center: [113.769993, 34.761188]
    });
      resizeEnable    是否监控地图容器尺寸变化,默认值为false,
          zoom           地图显示的缩放级别.
          center          地图中心点坐标值.
  设置地图内容
    //地图内容
    map.setFeatures(['bg', 'building', 'road', 'point']);
   设置地图上显示的元素种类,支持bg(地图背景)、point(兴趣点)、road(道路)、building(建筑物)
设置地图空间
    //地图空间
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'],
        function () {
            map.addControl(new AMap.ToolBar());
            map.addControl(new AMap.Scale());
        });
     可以同时加载多个插件时,以字符串数组的形式添加。在Callback回调函数中进行地图插    件的创建、插件事件的绑定等操作;插件为地图功能的扩展,按需加载。
设置覆盖物
    //覆盖物
    var marker = new AMap.Marker({
        position: [113.769993, 34.761188]
    });
    marker.setMap(map);
    var circle = new AMap.Circle({
        center: [113.769993, 34.761188],  //圆心位置
        radius: 100,   //圆半径,单位:米
        fillOpacity: 0.2,  //圆形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
        strokeWeight: 1  //轮廓线宽度。
    })
    circle.setMap(map);
Map.Marker(opt:MarkerOptions)     构造一个点标记对象,通过MarkerOptions设置点标记对象的属性,position   点标记在地图上显示的位置,默认为地图中心点
自定义信息检索
  //自定义窗体
    var infowindow;
    var infoWindowContent = '<div class="infowindow-content"><img style="width:40px;float: left; margin-right: 5px;margin-left:10px;" src="./images/map-logo.png" alt=""><h3 style="float:left;margin-top:5px;width:240px;height:40px;">如何联系真爱幼幼</h3><p>地址:中国 郑州郑东新区高铁东站绿地之窗云峰A座18层</p><p>电话:400-0836-399</p><p>微信:18539965575</p></div>';
    map.plugin('AMap.AdvancedInfoWindow', function () {
        infowindow = new AMap.AdvancedInfoWindow({
            panel: 'panel',  //结果列表的HTML容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。
            placeSearch: true, //是否支持显示周边搜索,默认是true
            asOrigin: true,  //是否支持作为路径规划的起点,默认是true
            asDestination: true,  //是否支持作为路径规划的终点,默认是true
            content: infoWindowContent  //显示内容,可以是HTML要素字符串或者HTMLElement对象
        });
        infowindow.open(map, [113.769993, 34.761188]);  //在地图的指定位置打开信息窗体
        // 点击出现
         $("#container").on("click", function () {
             infowindow.open(map, [113.769993, 34.761188]);
         })
    });
AMap.AdvancedInfoWindow(opt:AdvancedInforWindowOptions)   构造详细信息展示窗体。
  路线规划
    //汽车路线规划
    $('#car').on('click', function () {
        $('.pageShow').slideToggle();
        clearMarker()
        AMap.plugin('AMap.Driving', function () {
            var drving = new AMap.Driving({
                map: map,
                panel: "panel"
            })
            drving.search([
                { keyword: $('#star').val() },
                { keyword: $('#end').val() }
            ]);
        })
    })
    //步行路线规划
    $("#riding").on('click', function () {
        $('.pageShow').slideToggle();
        clearMarker()
        var walking = new AMap.Walking({
            map: map,
            panel: "panel"
        });
        walking.search([
            { keyword: $('#cStar').val() },
            { keyword: $('#cEnd').val() }
        ]);
    })
    //骑行路线规划
    $('#walk').on('click', function () {
        $('.pageShow').slideToggle();
        clearMarker()
        var riding = new AMap.Riding({
            map: map,
            panel: "panel"
        });
        riding.search([
            { keyword: $('#wStar').val() },
            { keyword: $('#wEnd').val() }
        ]);
    })

    function clearMarker() {
        if (marker) {
            marker.setMap(null);
            marker = null;
        }
        if (infowindow) {
            infowindow.close()
        }
    }
输入提示
   //输入提示
    var autoOptions = new AMap.Autocomplete({
        input: "tipinput"
    });
高德地图JavaScript API在核心功能之外提供了丰富的控件、服务插件以及工具插件,比如工具条、比例尺、路线规划、高级信息窗体等等,详细清单见下方总览,在使用这些接口之前需要使用AMap.plugin方法将对应的功能加载下来,然后才能创建相应的对象。
这样一个简单的标记有信息窗口的高德地图就完成了。
回复

使用道具 举报

2

主题

5

帖子

9

积分

新手上路

Rank: 1

积分
9
发表于 2022-12-12 14:11:52 | 显示全部楼层
高德加载wms服务偏移有什么解决方案吗
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表