<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx.cs" Inherits="JSONFromCS.WebForm12" %>

<!DOCTYPE>

<html>

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>高德地图 API JavaScript API</title>

    <link rel="stylesheet"  type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />

<script language="javascript" type="text/javascript" src="http://webapi.amap.com/maps?v=1.2&key=7aeb3377f9e53d9bf0c558bf8e821f76"></script>

<script language="javascript" type="text/javascript">

//http://developer.amap.com/javascript/example/num/1103

var mapObj;

var marker = new Array();

var windowsArr = new Array();

//基本地图加载

function mapInit(){

    mapObj = new AMap.Map("iCenter");

}

//地点查询函数

function placeSearch(){

    mapObj.clearMap();

    var arr = new Array();

    var MSearch;

    //绘制矩形边框

    arr.push(new AMap.LngLat("116.423321","39.884055"));

    arr.push(new AMap.LngLat("116.473103","39.884055"));

    arr.push(new AMap.LngLat("116.473103","39.919348"));

    arr.push(new AMap.LngLat("116.423321","39.919348"));

    var polygon = new AMap.Polygon({

        map:mapObj,

        path:arr,

        strokeColor:"#0000ff",

        strokeOpacity:0.2,

        strokeWeight:3,

        fillColor: "#f5deb3",

        fillOpacity: 0.8

    });

    mapObj.plugin(["AMap.PlaceSearch"], function() { //加载PlaceSearch服务插件

        MSearch = new AMap.PlaceSearch({

            pageSize: 8

        }); //构造地点查询类

        AMap.event.addListener(MSearch, "complete", placeSearch_CallBack); //查询成功时的回调函数

        MSearch.searchInBounds("酒店", new AMap.Bounds(arr[0], arr[2])); //范围查询

    });

}

//添加marker和infowindow

function addmarker(i, d){

    var lngX = d.location.getLng();

    var latY = d.location.getLat();

    var markerOption = {

        map:mapObj,

        icon:"http://webapi.amap.com/images/"+(i+1)+".png",

        position:new AMap.LngLat(lngX, latY)

    };

    var mar =new AMap.Marker(markerOption);

    marker.push(new AMap.LngLat(lngX, latY));  

    var infoWindow = new AMap.InfoWindow({

        content:"<h3><font color=\"#00a6ac\">  "+(i+1) + "."+ d.name +"</h3></font>"+TipContents(d.type, d.address, d.tel),

        size:new AMap.Size(300, 0),

        autoMove:true,

        offset:new AMap.Pixel(0,-30)

    });

    windowsArr.push(infoWindow);

    var aa = function(){infoWindow.open(mapObj, mar.getPosition());};

    AMap.event.addListener(mar, "click", aa);

}

//地点查询回调函数

function placeSearch_CallBack(data){

    var resultStr="";

    var resultArr = data.poiList.pois;

    var resultNum = resultArr.length;

    for (var i = 0; i < resultNum; i++) {

        resultStr += "<div id='divid"+(i+1)+"' onmouseover='openMarkerTipById1("+i+",this)' onmouseout='onmouseout_MarkerStyle("+(i+1)+",this)' style=\"font-size: 12px;cursor:pointer;padding:2px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/"+(i+1)+".png\"></td>"+"<td><h3><font color=\"#00a6ac\">名称: "+resultArr[i].name+"</font></h3>";

        resultStr += TipContents(resultArr[i].type, resultArr[i].address, resultArr[i].tel)+"</td></tr></table></div>";

        addmarker(i, resultArr[i]);

    }

    mapObj.setFitView();

    document.getElementById("result").innerHTML = resultStr;

}

function TipContents(type,address,tel){  //窗体内容

    if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {

        type = "暂无";

    }

    if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {

        address = "暂无";

    }

    if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {

        tel = "暂无";

    }

    var str ="  地址：" + address + "<br />  电话：" + tel + " <br />  类型："+type;

    return str;

}

function openMarkerTipById1(pointid,thiss){  //根据id打开搜索结果点tip

    thiss.style.background='#CAE1FF';

   windowsArr[pointid].open(mapObj, marker[pointid]);

}

function onmouseout_MarkerStyle(pointid,thiss) { //鼠标移开后点样式恢复

   thiss.style.background="";

}

</script>

</head>

<body onload="mapInit();">

<div id="iCenter"></div>

    <div class="demo_box">

        <p><input type="button" value="查询" onclick="placeSearch()"/><br />

        </p>

        <div id="r_title"><b>范围内查询结果:</b></div>

        <div id="result"> </div>

    </div>

    <form id="form1" runat="server">

    <div>

    </div>

    </form>

    <!-- JiaThis Button BEGIN -->

<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?uid=1363823158283538&type=left&move=0&btn=l5.gif" charset="utf-8"></script>

<!-- JiaThis Button END -->

</body>

</html>

高德地图 API JavaScript API的更多相关文章

  1. 高德地图(AMap)JavaScript API的使用

    申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: <script type="text/j ...

  2. Android 编程 AMapLocationClientOption 类中的 setNeedAddress 方法用处 （高德地图 com.amap.api.location.AMapLocationClientOption 中的类）

    最近在用高德地图来写Android App, 其中有一些 方法是不太理解的,这里写一下 对  高德地图  com.amap.api.location.AMapLocationClientOption ...

  3. 简单使用高德地图开放平台API

    需求说明 输入经纬度,得到城市名 挑选API 使用高德逆地理编码API,点击查看文档 demo <?php /** * 根据输入的经纬度返回城市名称 * @param $longitude 终点 ...

  4. Android 编程 AMapLocationClientOption 类中的 setMockEnable （高德地图 com.amap.api.location.AMapLocationClientOption 中的类）

    setMockEnable 高德地图中 AMapLocationClientOption 中有一个方法是设置APP是否接受模拟定位的设置,就是方法 setMockEnable //设置是否允许模拟位置 ...

  5. react中使用高德地图的原生API

    干货,无话 1.react-create-app,创建新react项目 2.npm install react-amap,引入高德地图的封装 3.编写组件index.js import React f ...

  6. 制作百度地图离线JavaScript API加载本地瓦片地图

    全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...

  7. js调用高德地图的搜索api

    var city = $('#city')[0].value; AMap.plugin(['AMap.Autocomplete'],function(){ var autoOptions = { ci ...

  8. 高德地图api实现地址和经纬度的转换(python)

    利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...

  9. BMap：JavaScript API

    ylbtech-Map-Baidu:JavaScript API JavaScript API百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构 ...

随机推荐

  1. 图论 竞赛图(tournament)学习笔记

    竞赛图(tournament)学习笔记 现在只是知道几个简单的性质... 竞赛图也叫有向完全图. 其实就是无向完全图的边有了方向. ​ 有一个很有趣的性质就是:一个tournament要么没有环,如果 ...

  2. luogu5282 【模板】快速阶乘算法

    由于巨佬 shadowice1984 卡时限,本代码已经 T 请不要粘上去交 退役之后再写一个常数小的多项式取模吧 一句话题意:NP问题,求N!%P 吐槽:出题人太毒瘤...必须写任意模数NTT,而且 ...

  3. 对路径访问拒绝，要加上具体filename/c.png

    string strPath = Path.Combine(FilePath, DateTime.Now.ToString("yyyy-MM-dd")); if (!Directo ...

  4. 键盘压缩背景，ios滚动不流畅，禁止遮罩层下面内容滚动

    1.<!--防止软键盘压缩页面背景图片--> <script> const bodyHeight = document.documentElement.clientHeight ...

  5. 进阶篇：4）面向装配的设计DFA总章

    本章目的:理解装配的重要性,明确结构工程师也要对装配进行设计. 1.基础阅读 ①进阶篇:1)DFMA方法的运用: ②需要一台FDM3d打印机:请查看 基础篇:8)结构设计装备必备: 2.为什么要学习D ...

  6. Drupal Coder 模块远程命令执行分析(SA-CONTRIB-2016-039)

    转载请注明文章出处:http://www.cnblogs.com/magic-zero/p/5787181.html 起初看到这个漏洞的时候是在exploit-db上边.地址在这里:https://w ...

  7. GCC 7.3.0版本编译http-parser-2.1问题

    http-paser是一个用c编写的http消息解析器,地址:https://github.com/nodejs/http-parser,目前版本2.9 今天用gcc 7.3.0编译其2.1版本时,编 ...

  8. java转pdf（html转为pdf）,解决中文乱码，标签不规范等问题

    第一步,下载jar包以及建对应的文件夹.注意pd4ml的jar要选择pro版本.然后建一个pd4fonts.properties 里面对应的字体. SimSun = simsun.ttf 前面为变量名 ...

  9. 如何在vue中请求本地json文件

    1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...

  10. 关于cg语言中求法向量 N=mul(worldMatrix_IT,normal); 的随笔

    解释一下标题,N是变换到世界坐标后的法向量,worldMatrix_IT是变换矩阵worldMatrix的逆的转置矩阵,normal就是模型坐标的法向量. 对于点p,我们根据变换矩阵M(即worldM ...