<%@ 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. springboot 项目中 使用 原型 模式 实现每一次 都获取不同的实例

    直接 上代码:

  2. JavaWeb学习笔记（十五）—— 使用JDBC进行批处理

    一.什么是批处理 批处理就是一批一批的处理,而不是一个一个的处理! 当你有10条SQL语句要执行时,一次向服务器发送一条SQL语句,这么做效率上很差!处理的方案是使用批处理,即一次向服务器发送多条SQ ...

  3. JAVA数据结构--AVL树的实现

    AVL树的定义 在计算机科学中,AVL树是最先发明的自平衡二叉查找树.在AVL树中任何节点的两个子树的高度最大差别为1,所以它也被称为高度平衡树.查找.插入和删除在平均和最坏情况下的时间复杂度都是.增 ...

  4. google浏览器安装不上的绝望经历

    手贱把google的一些文件删除了,整个浏览器都没法打开 决定重装下,但是连卸载的功能都无法打开了 于是决定上网重新下载了个安装包,发现安装包都打不来 很绝望,查了很多资料 很多人说要删除注册表的东西 ...

  5. 最近总想着写一个模拟alert和confirm插件，代替原生的

    msgbox-confirm github:  https://github.com/tong-mikasa/msgbox-confirm 主要js代码,scss代码 (function($) { $ ...

  6. Ubuntu16.04+Cuda8.0+cuDNN6配置py-faster rcnn(转)

    原博客地址:https://blog.csdn.net/meccaendless/article/details/79557162 0前言Faster R-CNN是任少卿2015年底推出的目标检测算法 ...

  7. day1-Python擅长的领域+学习内容

    Python擅长的领域 WEB开发 Django   Pyramid     Tornado       Bottle    Flask    WebPy 网络编程 Twisted        Re ...

  8. PHP 字符串 操作符<<< 使用的注意事项

    在看<深入PHP和JQeury开发>过程中,遇到字符串 操作符<<<,代码没有问题,但格式却要求特别严格,找到PHP手册上的实例,翻译过来,留作后用. A string ...

  9. pxe-kickstart

    PXE client--->DHCP(pxelinux.0;  next-server  tftp-server) syslinux   vmlinuz initrd.img ks.cfg--- ...

  10. pycharm安装与使用

    python是一门解释性编程语言,所以一般把写python的工具叫解释器.写python脚本的工具很多,小编这里推荐pycharm,是小编用过最好用的一个工具.比较顺手的一个.而且可以跨平台,在mac ...