ダイアログ/ APIバージョン3を追加するアイコンを変更するには、[ASP.netのWebフォーム/グーグル] Googleマップのマーカー（マーカー）は、

その他 2019-09-04 16:30:45 訪問数: null

ダイアログ/ APIバージョン3を追加するアイコンのアイコンを変更するには、[ASP.netのWebフォーム/グーグル] Googleマップのマーカー（マーカー）は、


前の記事の続き：複数のマーカー（マーカー）を配置する[ASP.net Webフォーム/グーグル]場所/ GoogleマップのAPIバージョン3

この時間は、アイコンマーカーを変更する方法を見つけます

（ちなみに、私はいつもマシンは、現在のコンピュータ・ネットワークを通じて発見されたとして使用するGoogleマップのAPIは、そのサイトがある限り、オープンでなければならないと考えてい

あなたがプレイすることができます参照）があります。

また、プロジェクトの要件を満たすために、追加再建プログラムは、わずかにDBのデータを持っています


Create database GoogleMapDB
Go
Use GoogleMapDB
Go
/*在C#的纬度经度类型为double，在SQL Server的类型为float
  参考：http://stackoverflow.com/questions/1440620/which-sql-server-data-type-best-represents-a-double-in-c
*/
Create table tb_company
(
 id int identity primary key,/*主键*/
 zip_no int,/*邮递区号*/
 company_title nvarchar(50),/*公司名称*/
 [address] nvarchar(500),   /*公司地址*/
 lat float default(0) ,     /*公司所在纬度*/
 lng float default(0) ,     /*公司所在经度*/
 company_desc nvarchar(50),/*公司简介*/
 iconName varchar(50) /*标记点的icon文件名*/
)
Go
Insert into tb_company (zip_no,company_title,[address],company_desc,iconName) values
(100,'精诚资讯','中国台北市中正区罗斯福路2段100号','在恒逸资讯上过课的日子受您照顾了<(_ _)>','flower.jpg'),
(100,'中国台湾师范大学','中国台北市和平东路一段162号','在捷运古亭站附近的大学','bar.jpg'),
(100,'捷运古亭站','中国台北市中正区罗斯福路2段164-1号','南京松山线啥时会开？','airplane.jpg')

画像

データアクセス層として、新しいクラスをDBUtil.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Configuration;
using System.Data;
using System.Data.SqlClient;

/// 
/// DBUtil 的摘要描述
/// 
public class DBUtil
{

    //连线字符串
    string connStr = WebConfigurationManager.ConnectionStrings["connStr"].ConnectionString;

    /// 
    /// 传入SQL语句，回传DataTable对象
    /// 
    /// 
    /// 
  
  
    public DataTable queryDataTable(string sql)
    {
       
        DataSet ds = new DataSet();
        using (SqlConnection conn=new SqlConnection(this.connStr))
        {
            SqlDataAdapter da = new SqlDataAdapter(sql,conn);
            da.Fill(ds);
        }
        return ds.Tables.Count > 0 ? ds.Tables[0] : new DataTable();
    }


    
}

JSON文字列を出力するためのgetSpot.ashx


<%@ WebHandler Language="C#"  %>

using System;
using System.Web;
/*要引用以下的命名空间*/
using System.Data;
using System.Data.SqlClient;
using System.Net;
using System.IO;
/*Json.NET相关的命名空间*/
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

public class getSpot : IHttpHandler {

    int zip_no = 100;//中正区的邮递区号
    DBUtil db = new DBUtil();
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        if (!string.IsNullOrEmpty(context.Request["zip_no"]))
        {
            int.TryParse(context.Request["zip_no"], out this.zip_no);//防SQL Injection，转类型失败就用默认值
        }

         
        //取得DataTable原始数据
        DataTable dt = db.queryDataTable(@"SELECT zip_no,company_title,address,company_desc,iconName,lat,lng
                                            from tb_company
                                            Where zip_no="+this.zip_no+@"
                                            Order by ID ASC");
        //因为本范例的数据都没有纬度和经度，所以把原始数据DataTable传入取得一个新的DataTable(有纬度、经度的)
        DataTable dt_new  = this.fillLatLng(dt);
        //利用Json.NET将DataTable转成JSON字符串，请参考另一篇文章：http://www.dotblogs.com.tw/shadow/archive/2011/11/30/60083.aspx
        string str_json = JsonConvert.SerializeObject(dt_new, Formatting.Indented);
        context.Response.Write(str_json);
    }
 
    /// 
    /// 回传有纬度和经度的DataTable
    /// 
    /// 
  
  
     private DataTable fillLatLng(DataTable dt)
    {

        DataTable dt_new = dt.Copy();
        for (int i=0;i
  
  
   
   
    /// 传入JSON字符串，取得经纬度
    /// 
    /// 
   
   
    /// 
   
   
     private double[] getLatLng(string json)
     {
         JObject jo = JsonConvert.DeserializeObject
   
   
    
    (json);

         //从results开始往下找
         JArray ja = (JArray)jo.Property("results").Value;
         jo = ja.Value
    
    
     
     (0);//JArray第0笔
         //得到location的JObject
         jo = (JObject)((JObject)jo.Property("geometry").Value).Property("location").Value;
         
         //纬度
         double lat = Convert.ToDouble(((JValue)jo.Property("lat").Value).Value);
         //经度
         double lng = Convert.ToDouble(((JValue)jo.Property("lng").Value).Value);
         
         double[] latLng= {lat,lng};

         return latLng;
     
     } 
      
    /// 
     
     
     /// 把地址转成JSON格式，这样资讯里才有经纬度
     /// 因为使用到地理编码技术，请注意使用限制：http://code.google.com/intl/zh-TW/apis/maps/documentation/geocoding/#Limits
    /// 
    /// 
     
     
    /// 
     
     
     private string convertAddressToJSONString(string address)
     {
         //var url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address=" + HttpContext.Current.Server.UrlEncode(address);
         //2012.4.12 以上是旧写法，新写法请用以下
        var url =    "http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=" + HttpContext.Current.Server.UrlEncode(address);


         string result = String.Empty;
         HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);
         using (var response = request.GetResponse())
         using (StreamReader sr = new StreamReader(response.GetResponseStream()))
         {

             result = sr.ReadToEnd();
         }
         return result;

     }
 
    
    
    public bool IsReusable {
        get {
            return false;
        }
    }

}

結果：

画像

jQueryのAjaxとGoogleマップAPIのDefault.aspxのは少し読みやすく、文言を変更しました


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
    Debug="true" %>

Default.aspx.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

/*Code-Behind没什么要做的*/
public partial class _Default : System.Web.UI.Page
{
    protected string zip_no = "100";

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)//Get Method要做的事
        {
            
        }

    }

}

Default.aspxの実行結果：

画像

環境は準備ができている、開始します

画像

ちょうどライン上に太字で以下を追加示すアイコンが非常に簡単です変更


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
    Debug="true" %>

結果：

画像

各マーカーポイントの[次へ]をクリックしクリックして、ダイアログボックスが表示されます

画像

本当にここにいる場合は、GoogleのAPIによる実施例を書き込みます


  var map;
        //在某一区加入多个标记点
        function addMarker(str_json)
        {
           //是否为第一次执行循环
           var first = true;    



             
           
            for (var index in str_json) 
            {

            //建立纬经度座标对象
            var latlng = new google.maps.LatLng(str_json[index].lat, str_json[index].lng);


                if (first == true) 
                {//第一次执行循环
                    /*以哪个纬经度中心来产生地图*/
                    var myOptions = {
                        zoom: 14,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    /*产生地图*/
                    map = new google.maps.Map($("div#div_showMap")[0], myOptions);

                    first = false;
                } //End if (first == true) 

                //加入一个Marker到map中
                var imageUrl = "";//空字符串就会使用默认图示
                if(str_json[index].iconName!="")//有值
                {
                //可以是相对路径也可以是http://开头的绝对路径，路径错误的话图示不会出来
                    imageUrl = "images/" + str_json[index].iconName;
                }
                
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: str_json[index].company_title,
                    icon:imageUrl
                });
                
               
                /*资讯窗口*/
               var infowindow = new google.maps.InfoWindow({content:str_json[index].company_desc}); 
                
              
                google.maps.event.addListener(marker, 'click', function() { 
                  infowindow.open(map,marker); });
            } //End for (var index in str_json) 
        }//End function addMarker()

あなたは、タグ・ポイント、ダイアログ（情報ウィンドウ）をクリックして、同じ位置にあり、文脈に関係なく同じであることがわかります

画像

したがって、このポストのバグ修正を参照してください：GoogleマップAPI v3に - 複数のマーカー、複数の情報ウィンドウ

コンプリートのDefault.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
    Debug="true" %>

結果：

画像

画像

画像

完全な研究パッケージ

2011年12月2日の記録、ポイントをマークし、10標準の唯一最大に思えますか？2013年2月1日WORM：[ASP.net Webフォーム/グーグルの] 10ストロークでは、Google APIのジオコーディングアドレスがJSONリクエストの制限を回し問題を解決します

さらに、マーカーは、太字で、次のようにカスタム属性が、することができ


              //加入一个Marker到map中
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: str_json[index].通讯地址,
                    html: str_json[index].称谓,
                    LABOR_ID:str_json[index].LABOR_ID
                });

                 //为每个标记点注册click事件
               google.maps.event.addListener(marker, 'click', function() { 
                 
                  /*this就是指marker，当click标记点时，超链接导向其他页*/
                  window.location.href = "persondetail.html?LABOR_color: blue;">this.LABOR_ID;
                  
                 
                   });//End click function

2011年12月3日WORMは、GoogleマップのAPIサービスと特異的に対処するために、自分のようなものを書きます


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Net;
using System.IO;
using Newtonsoft.Json.Linq;
using Newtonsoft.Json;
using System.Data;

/// 
/// Create by Shadow at 2011.12.03
/// 参考文章：http://www.dotblogs.com.tw/shadow/archive/2011/02/18/21442.aspx
/// http://www.dotblogs.com.tw/shadow/archive/2011/12/02/60381.aspx
/// http://www.dotblogs.com.tw/shadow/archive/2011/12/02/60479.aspx
/// 
public class GoogleMapUtility
{

    /// 
    /// 回传有纬度和经度的DataTable
    /// 
    /// 
  
  
    public static DataTable fillLatLng(DataTable dt, string addressColumnName)
    {
        /*先把原始结构和数据Copy到一份新的DataTable*/
        DataTable dt_new = dt.Copy();
        dt_new.Columns.Add("lat", typeof(double));
        dt_new.Columns.Add("lng", typeof(double));

        for (int i = 0; i < dt.Rows.Count; i++)//走访原始数据
        {
            string json_address = GoogleMapUtility.convertAddressToJSONString(dt.Rows[i][addressColumnName].ToString());
            //取得纬度和经度
            double[] latLng = GoogleMapUtility.getLatLng(json_address);
            dt_new.Rows[i]["lat"] = latLng[0];
            dt_new.Rows[i]["lng"] = latLng[1];

        }


        return dt_new;
    }


    /// 
    /// 传入Geocoding API产生的地址JSON字符串，取得经纬度
    /// 
    /// 
    /// 
  
  
    public static double[] getLatLng(string json)
    {
        JObject jo = JsonConvert.DeserializeObject
  
  
   
   (json);

        //从results开始往下找
        JArray ja = (JArray)jo.Property("results").Value;
        jo = ja.Value
   
   
    
    (0);//JArray第0笔
        //得到location的JObject
        jo = (JObject)((JObject)jo.Property("geometry").Value).Property("location").Value;

        //纬度
        double lat = Convert.ToDouble(((JValue)jo.Property("lat").Value).Value);
        //经度
        double lng = Convert.ToDouble(((JValue)jo.Property("lng").Value).Value);

        double[] latLng = { lat, lng };

        return latLng;

    }

    /// 
    
    
    /// 把地址转成JSON格式，这样资讯里才有纬经度
    /// 因为使用到Geocoding API地理编码技术，请注意使用限制：http://code.google.com/intl/zh-TW/apis/maps/documentation/geocoding/#Limits
    /// 
    /// 
    
    
    /// 
    
    
    public static string convertAddressToJSONString(string address)
    {
        //var url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address=" + HttpContext.Current.Server.UrlEncode(address);
       //2012.4.12 以上是旧写法，新写法请用以下
        var url =   "http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=" + HttpContext.Current.Server.UrlEncode(address);
        string result = String.Empty;
        HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);
        using (var response = request.GetResponse())
        using (StreamReader sr = new StreamReader(response.GetResponseStream()))
        {

            result = sr.ReadToEnd();
        }
        return result;

    }
}

（.ashxするなど）を使用し


<%@ WebHandler Language="C#"  %>

using System;
using System.Web;
/*要引用以下的命名空间*/
using System.Data;
using System.Data.SqlClient;
using System.Net;
using System.IO;
/*Json.NET相关的命名空间*/
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
//如何于泛型处理常式 .ashx 中存取工作阶段变量(Session Variable)   
using System.Web.SessionState;
//http://www.limingchstudio.com/2009/05/ashx-session-variable.html  
public class GetPeopleMapData : IHttpHandler, IRequiresSessionState 
{

     
    
    public void ProcessRequest (HttpContext context) {
        
        

        context.Response.ContentType = "text/plain";
        //从DB取得DataTable原始数据
        DataTable dt = new DataTable();
        //假设因为数据都没有纬度和经度，所以把原始数据DataTable传入此方法再取得一个新的DataTable(有纬度、经度的)
        DataTable dt_new  = GoogleMapUtility.fillLatLng(dt,"address");//字符串address为数据表的地址字段名称
        //利用Json.NET将DataTable转成JSON字符串，请参考另一篇文章：http://www.dotblogs.com.tw/shadow/archive/2011/11/30/60083.aspx
        string str_json = JsonConvert.SerializeObject(dt_new, Formatting.Indented);
        context.Response.Write(str_json);//输出JSON字符串
    }
 
    
    public bool IsReusable {
        get {
            return false;
        }
    }

}

2012年2月3日追記型の記事を読むの拡張子：

[C＃の.NET] [ネットワーク] IP場所を解析JSON APIを使用する方法


2012年4月12日時点では、デフォルトのマーカー張IMGの写真に注意を払うことです

今日はCSSモードを定義するためにARTを見つけました

#div_showMap IMG {パディング：6.5em 7.2em;}

IE8で閲覧し、その後、マーカーが消えます

そして、リターン・ステータスがOK結果文字列の結果であるかどうかを確認するために、特別なGoogleのジオコーディングを修正


/// 
    /// 传入json字符串，判断回传结果Result是否为OK
    /// 
    /// 
    /// 
  
  
    private static bool isResultOk(string json)
    {
        JObject jo = JsonConvert.DeserializeObject
  
  
   
   (json);

          
        return jo["status"].ToString().ToUpper() == "OK";
    }

オリジナル：大列  のアイコンを変更するには、[ASP.net Webフォーム/グーグル] Googleマップのマーカー（マーカー）、ダイアログ/ APIバージョン3を追加


おすすめ

転載: www.cnblogs.com/chinatrump/p/11458441.html
おすすめ
ランキング
--- ELオプションを搭載するテンプレートを指定するオプションをレンダリング別テンプレート/使用を指定するためのオプションを使用して、インラインテンプレート/テンプレートの使用を指定するために、テンプレート/テンプレートオプションを使用してテンプレートを指定します
0216leetcodeはPythonで5つの質問をブラシします
ショック！七つの子どもたちは魂を拷問しました！暴露子どもたちはインサイダーを振っプログラム！
ターゲット属性タグをhtmlの
Linuxビルドnacosスタンドアロンバージョンとクラスター
Cálculo experimental da renda simulada de investimento fixo do fundo
Kali Linux は VMware ツールをインストールします (vmtools ボタンは灰色です)
程序员洞察报告：90后占比过半 搜索算法等岗位人才短缺
【Java基礎シリーズチュートリアル】第17章 Javaアノテーション
Javaでの空白を入力できないようにユーザー
アーカイブ
もっと
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)

コードワールド

© 2018 codetd.com