分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

高德Web开发入门之一

发布时间:2023-09-06 01:10责任编辑:彭小芳关键词: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

高德Web开发入门之一

原文地址:http://www.cnblogs.com/wenlong512/p/7511897.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved