• 高德Web开发入门之一


    高德Web开发

    一、地图开发阐述

      1)不管是高德地图的Web开发使用,亦或是百度地图的应用开发,都可以直接百度“高德地图/百度地图”,进入地图首页下边“开放平台”。然后就可以更具自己需要的功能选择不同的API。

      2)如果使用API必须进行注册得到自己的一个KEY,这个key是需要在以后的代码中用到的,所以一定要先记下来。

      3)在开发过程中不像其他前端框架需要引用jar包,所以不应担心环境的架设,只需要按照下边的步骤做就可以,不必担心。

      4)在地图上需要注意的功能:本地定位,目的地定位,路线选择,

    二、代码编写逻辑  

      1)创建新项目asp.net空项目,可以使用html进行显示。

      2)html页面修改Mete信息,创建需要展示的div,设置其id为“container”

      3)设计该id样式信息,引入js,确定你的地图应用开发,用key来唯一确定。

      4)js代码中来确定初始化地图的中心位置,以及覆盖图层来实现定位突变显示

      5)js代码实现小工具的使用,加入3D显示功能

    三、代码Demo

      1)html页面修改Mete信息,创建需要展示的div,设置其id为“container”

        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    
     <div id="container" tabindex="0"></div>
    

      

      2)设计该id样式信息,引入js,确定你的地图应用开发,用key来唯一确定

        在这里使用KETY为“高德地图示例-车联网-ADemo”

    body, html, #container {
                height: 100%;
                margin: 0px;
            }
    
        <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=高德地图示例-车联网-ADemo"></script>
        <script src="ADemo.js"></script>
    

      

      3)ADemo.js代码中来确定初始化地图的中心位置,以及覆盖图层来实现定位突变显示

    var map = new AMap.Map('container',
            {
                //-------------------------初始化中心点一,直接输入Start-------------------------
                resizeEnable: true,
                zoom: 10,
                //center取值方法一:
                center: [116.480983, 40.0958]
                //center取值方法二
                //new AMap.LngLat(116.39,39.9)});
                //-------------------------直接输入End-------------------------
    
                //-------------------------初始化中心点二,通过函数设置中心点Start,只需要修改中心点数据就可以-------------------------
                //  map.setZoom(10);
                //  map.setCenter([116.39,39.9]);
                //-------------------------初始化中心点,通过函数设置中心点End-------------------------
    
            });
    
    
    var marker = new AMap.Marker({
        position: [116.480983, 39.989628],//marker所在的位置
        map: map//创建时直接赋予map属性
    });
    //也可以在创建完成后通过setMap方法执行地图对象
    marker.setMap(map);
    

      

      4)js代码实现小工具的使用,加入3D显示功能

        pitch: 75,
        viewMode: '3D',
        zoom: 17,
        expandZoomRange: true,
        zooms: [3, 20],
        center: [116.333926, 39.997245]
    });
    

      

    四、总结

      1)使用MapWebApi不需要太多的功能,只需要记住Key的应用就没有容易疏忽的点了

      2)源码分享:http://pan.baidu.com/s/1jIy0hKy

  • 相关阅读:
    一则由表单提交引发的思考
    前端技术栈持续汇总中(已解锁)
    5599充值中心功能开发
    CSS动画持续汇总中
    编程小技巧持续汇总中
    开发软件安装方法汇总
    HashMap中tableSizeFor
    2019年JVM面试都问了什么?快看看这22道面试题!(附答案解析)
    Spring注解@EnableWebMvc使用坑点解析
    线程池中 work 为何要实现 AbstractQueuedSynchronizer
  • 原文地址:https://www.cnblogs.com/wenlong512/p/7511897.html
Copyright © 2020-2023  润新知