<%@ 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. 大数据框架：Spark vs Hadoop vs Storm

    大数据时代,TB级甚至PB级数据已经超过单机尺度的数据处理,分布式处理系统应运而生. 知识预热 「专治不明觉厉」之“大数据”: 大数据生态圈及其技术栈: 关于大数据的四大特征(4V) 海量的数据规模( ...

  2. [集合]Collection集合框架源码分析

    Collection接口 在java的集合类库中,基本接口是Collection,该接口的在集合中的源码定义如下(将源码中的注释删掉了): public interface Collection< ...

  3. linux I/O函数使用

    一.lseek lseek函数的作用是用来重新定位文件读写的位移. 头文件以及函数声明 #include <sys/types.h> #include <unistd.h> o ...

  4. 03. PNG,GIF,JPG的区别及如何选？

      3.PNG,GIF,JPG的区别及如何选? 照片用 JPG. 动画用 GIF. Logo.Icon 等小图用 PNG-8. 非特殊情况,尽量不要用 PNG-24 和 PNG-32.  

  5. 搭建spring boot项目

    1.建立maven项目 点击finish,完成创建maven项目 在pom.xml文件中添加如下代码: <parent> <groupId>org.springframewor ...

  6. java中的Lamdba表达式和Stream

    基于JDK 1.8 1.循环: // 以前的循环方式 for (String player : players) { System.out.print(player + "; ") ...

  7. sql查询字段中的值长度最大的记录

    SELECT max(length(字段)) FROM 表名;

  8. oracle12c之二 控制PDB中SGA 与 PGA 内存使用

    oracle12c之 控制pdb中sga 与 pga 内存使用 Memory Management using Resource Manager Oracle数据库资源管理器(资源管理器)现在可以在多 ...

  9. c++第二次作业

    1.函数重载编程练习编写重载函数add(),实现对int型,double型,Complex型数据的加法.在main()函数中定义不同类型数据,调用测试. #include<iostream> ...

  10. SQL语句exists用法

    首先头脑中有三点概念: 1 .  EXISTS子查询找到的提交 NOT EXISTS 子查询中 找不到的提交 说明:不要去翻译为存在和不存在,把脑袋搞晕. 2 . 建立程序循环的概念,这是一个动态的查 ...