高德地图API练习
高德地图API练习
通过对高得地图API的练习使用，对如何在网页中使用地图有了初步的认识，同时再次认识到学好
javascript的重要性。
使用方法
- 获取API链接
- 选择
javaScript API - 选择获取
API
- 注册
- 创建新应用，并获取Key值
- 选择实例中心
- 参考示例代码进行开发
效果图
代码
<html lang="en">
<head><meta charset="UTF-8"><title>maptitle><meta name="keyword" content=""><meta name="description" content=""><style>body, html {width: 100%;height: 100%;}* {margin: 0;padding: 0;}body {background: url(images/bg.png) no-repeat center top;background-size: auto 100%;}.container {position: relative;}.header {width: 1000px;height: 80px;/*background: #ddd;*/margin: 0px auto;}.header h1 a {margin-top: 15px;float: left;}.header span {font-size: 20px;color: #fff;line-height: 80px;text-align: center;float: right;}.container .text {width: 1000px;height: 60px;background: #f26621;color: #fff;text-align: center;line-height: 60px;margin: 0 auto;font-size: 25px;}.container .map {width: 1000px;height: 480px;background: #fff;margin: 0 auto;}.search {width: 650px;height: 50px;position: absolute;top: 100px;left: calc(50% - 325px);background: red;}.search .searchbox {width: 550px;height: 50px;border: none;outline: none;text-indent:15px;float: left;} .search .searchbutton {width: 100px;height: 50px;border: none;outline: none;color: #fff;background: red;float: left;} .info-title{color: white;font-size: 14px;background-color: blue;line-height: 26px;padding: 0px 0 0 6px;font-weight: lighter;letter-spacing: 1px}.info-content{padding: 4px;color: #666666;line-height: 23px;font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;}.info-content img{float: left;margin: 3px;}style>
head>
<body><div id="content"><div class="header"><h1><a href="#"><img src="images/logo.png" alt="">a>h1><span>LBS移动点餐span>div><div class="container"><div class="text">点外卖，上饿了么!div><div class="map" id="map">div><div class="search"><input type="text" class="searchbox" id="tipinput" placeholder="请输入地址。。"><input type="button" class="searchbutton" value="搜索">div><div id="tip">鼠标点击热点试试div>div>div><script src="http://webapi.amap.com/maps?v=1.3&key=86837226df1f8bc273873758dd5f3c45&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow,AMap.Autocomplete">script><script>var map = new AMap.Map('map', {resizeEnable: true,zoom:11,center: [116.397428, 39.90923]});var placeSearch = new AMap.PlaceSearch(); //构造地点查询类var infoWindow=new AMap.AdvancedInfoWindow({});map.on('hotspotclick', function(result) {placeSearch.getDetails(result.id, function(status, result) {if (status === 'complete' && result.info === 'OK') {placeSearch_CallBack(result);}});});//回调函数function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);var poiArr = data.poiList.pois;var location = poiArr[0].location;infoWindow.setContent(createContent(poiArr[0]));infoWindow.open(map,location);}function createContent(poi) { //信息窗体内容var s = [];s.push(''+poi.name+''+"地址：" + poi.address);s.push("电话：" + poi.tel);s.push("类型：" + poi.type);s.push('');return s.join("
");}var autoOptions = {input: "tipinput"};var auto = new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map}); //构造地点查询类AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name); //关键字查询查询}script>
body>
html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！