<%@ 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. stl容器学习——queue,stack,list与string

    目录 头文件 string 目录部分 1.string的定义及初始化 ① 用一个字符串给另一个字符串赋值 ②用字符串常量对字符串进行赋值 ③ 用n个相同的字符对字符串赋值 2.string的运算符及比 ...

  2. 转一个财务方面常用到的数字金额转成汉字大写金额 php类

    系统里有牵扯到财务.合同等方面的处理时,常常需要把数字金额转成汉字大写金额(貌似这样正规),转一个转换的php class吧!<?php// 诸海加(ALPHA .z)// 2000-7-19 ...

  3. Vue页面加载时，触发某个函数的方法

    需要在加载页面的时候调用生成验证码的click事件函数 解决方法如下,利用Vue中的mounted mounted:function(){ this.createcode();//需要触发的函数 } ...

  4. python全栈开发_day12_装饰器

    一:装饰器 1)什么是装饰器 装饰器的本质就是利用闭包,在满足开放(修改函数锁包含的功能)封闭(不改变源代码)的情况下完成操作. 2)装饰器的基本运用 def name_judge(f): def a ...

  5. mybatis的入门(一)

    一.mybatis的介绍 mybatis是Apache的一个开源项目ibatis,2010年这个项目由apache software foundation 迁移到了google code,并且改名为M ...

  6. LOJ6500. 「雅礼集训 2018 Day2」操作（哈希＋差分）

    题目链接 https://loj.ac/problem/6500 题解 区间取反 \(01\) 串的经典套路是差分.我们令 \(b_i = a_i\ {\rm xor}\ a_{i - 1}\)(\( ...

  7. 使用python uiautomation从钉钉网页版提取公司所有联系人信息

    之前写了一个提取QQ群里所有人信息的脚本 https://www.cnblogs.com/Yinkaisheng/p/5114932.html 今天写一个从钉钉网页版提取公司所有人通讯录的脚本,,本脚 ...

  8. MVC返回数据流，ajax接受并保存文件

    js代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  9. iview tree 之如何获取已勾选的节点

    1.记得添加 ref 2.用 this.$refs.tree.getCheckNodes()

  10. java多线程-ReadWriteLock

    大纲: ReadWriteLock接口 ReentrantReadWriteLock ReentrantReadWriteLock使用 一.ReadWriteLock public interface ...