<%@ 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. python常用模块之OS

    os模块偏于文件目录管理 <1>.常用方法 工作目录: os.getcwd() 返回当前工作目录 os.chdir(dir) 更改当前工作目录,相当于cd 目录文件操作: os.mkdir ...

  2. CRC32算法笔记

    这几天在研究CRC32的计算过程,看了CRC算法的原理,也看了不少通过移位法实现的代码,但是算出的结果跟校验工具算的不一致. 折腾了好长时间,终于找到一个手工计算CRC32的文章,再对照IEEE 80 ...

  3. 适配器模式-如何把usb插到插座上

    前言 下面所写的内容不是实际的业务场景, 也可能不符合正常的生活习惯, 或者不满足一些人的口味 所写的内容包括之前的帖子,只是为了方便大家更好的记住这个设计模式,实际生活中要灵活应用 设计模式重思想, ...

  4. TD-LTE技术原理与系统设计

    王映民 等.人邮2010 E-UTRAN E-NodeB 无线资源管理承载 路由到SGW IP头压缩加密 UE附着MME选择 寻呼 广播 测量 EPC SGW 移动性管理  路由转发 终止寻呼 监听 ...

  5. PHP打开错误提示和关闭错误提示的方法

    找到php的配置文件,也就是php.ini 在文件中查找 ‘display_errors’   查找到 display_errors = Off 或者 display_errors = On, Off ...

  6. float 浮动 文档流和文字流区别

    关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...

  7. my34_脚本冥等添加自动任务-mysql监控部署

    场景: 定义一套添加mysql监控的脚本,在mysql安装完毕后,一键执行添加监控   已有以下的等一系列命令可以读取mysql从库的延迟时间并推向influxdb,变化的部分为 -P 端口.-k k ...

  8. docker jenkins使用（二）

    jenkins的安装很简单,但是jenkins的初次使用却很头疼.对于小白来说有点不太明白 背景: 开发更新app需要很多步骤,生成jar包.上传服务器.更新启动程序,如果有很多服务器,那么需要做好多 ...

  9. 在 Linux 服务器上部署 nginx 之后不能访问

    原文地址:https://blog.csdn.net/lipeigang1109/article/details/73295373 解决办法:https://jingyan.baidu.com/art ...

  10. HBase的Java Api连接失败的问题及解决方法

    分布式方式部署的HBase,启动正常,Shell操作正常,使用HBase的Java Api操作时总是连接失败,信息如下: This server is in the failed servers li ...