ASP. Net: EshineASPNet tutorial-store map display,

ASP. Net: EshineASPNet tutorial-store map display,

As a main entry point, maps are very important to Internet companies. This is also the reason why Apple's maps are so bad at the beginning and Google is used. It is very rigid to use a map to display the location of a store. I will share with you how to call Baidu map. In fact, I first used Google map. After Google launched China, the map service became increasingly unstable and had to switch to Baidu map. Of course, to be honest, Baidu map is also doing quite well now. We have also used indoor maps for large malls. We have also made several overseas cities. The author's travel to Seoul, South Korea is very useful, of course, the author has always used autonavi in navigation. It is not Baidu's bad but a habit problem.

The functions to be implemented here are as shown in the figure above. First select the province and city (which can actually include the District), filter out the shops Based on the city, and mark each store on the map, click the tag to pop up the specific information of the store. The information can also contain links, such as navigation to the store website, or navigation to the new Baidu map page for Route Planning.

Baidu Map

First, you can apply for a Key on Baidu map. It is not difficult to filter out stores based on the drop-down boxes of cascade provinces and cities. Here we will share how to associate the store icons with maps and put the information into the bubble of the map.

<Script type = "text/javascript" src = "https://api.map.baidu.com/api? Ak = your key & v = 1.5 "> </script> <script src =" JS/baidumap. js "type =" text/javascript "> </script>

First, you need to load the Baidu map API, and a baidumap. js is used to set the location of the map center and add the Marker tag.

Then we can place a DIV anywhere on the webpage and use code to generate a string and drop it into the DIV.

StringBuilder sb = new StringBuilder (); sb. appendLine ("<script type = 'text/javascript '>"); sb. appendLine ("initMap ();"); double lat, lng, clat = 0.0, clng = 0.0; int index = 0; string letter; string iconimage; try {foreach (DataRow dr in dt. rows) {if (index <= 26) {letter = (char) (int) 'A' + index )). toString (); iconimage = "/Images/marker" + letter + ". png ";} else {iconimage ="/Images/marker/"+ index + ". png ";} lat = Convert. toDouble (dr ["lat"]); lng = Convert. toDouble (dr ["lng"]); clat + = lat; clng + = lng; string sgm =" https://map.baidu.com/m?word= "+ Server. urlEncode (dr ["address"]. toString () + "& ie = UTF-8"; sb. appendLine ("addMarker (" + lng + "," + lat + "," + index + ", '"+ dr [" supplier "] +" "+ dr [" branch "] +"', '"+ dr [" address "] + "', '"+ sgm +"'); "); index ++ ;}} catch {throw new Exception (" An error occurred while loading the map tag. Check the province and city information! "); Return-1;} clat/= dt. rows. count; clng/= dt. rows. count; sb. appendLine ("setMapcenter (" + clng + "," + clat + ");"); sb. appendLine ("</script>"); Literal1.Text = sb. toString ();

At the beginning, we established a StringBuilder to save the content we want to put in Baidu map DIV. In fact, it is a piece of JS code. We pieced together JS to initialize Baidu map and add the records we need one by one.

The clat and clng variables are used to represent the central location of the map. Because we have many stores, we calculate the average longitude and latitude values of each store as the central point of our map.

Iconimage is A Marker. If the number of stores is small, use the letters from A ~ Z indicates that it is enough, but if there are more than 26 stores, then we will use numbers to represent Z and the code will use this to get the image address of Marker.

AddMarker is a function in baidumap. js. It is used to add a tag, including the content in the tag, which can contain links. Note that Server. UrlEncode is used; otherwise, Chinese characters will not be processed properly.

The final content in StringBuilder is the JS Code we need to throw it to the front-end.

Google Maps

If you are not in China, Google is preferred. For Google Maps, we have a dedicated tool-Subgurim. Controles, instead of using JS, but operating objects. Its usage is as follows:

<%@ Register Assembly="GMaps" Namespace="Subgurim.Controles" TagPrefix="GM1" %><GM1:GMap ID="GMap1" runat="server" Width="100%" Height="480" GZoom="12" />

The above is the front-end code, and the back-end is as follows:

        GMap1.reset();        GMap1.Add(new GControl(GControl.preBuilt.GOverviewMapControl));        GMap1.Add(new GControl(GControl.preBuilt.LargeMapControl));        GIcon baseIcon = new GIcon();        baseIcon.shadow = "https://www.google.cn/mapfiles/shadow50.png";        baseIcon.iconSize = new GSize(20, 34);        baseIcon.shadowSize = new GSize(37, 34);        baseIcon.iconAnchor = new GPoint(9, 34);        baseIcon.infoWindowAnchor = new GPoint(9, 2);        GIcon letteredIcon;        GMarker marker;        GInfoWindow window;        double lat, lng, clat = 0.0, clng = 0.0;        int index = 0;        string letter, lilist = "", ballooncontent;        int itemik = 0, itemcm = 0, itemmn = 0;        foreach (DataRow dr in dt.Rows)        {            letter = ((char)((int)'A' + index++)).ToString();            letteredIcon = new GIcon(baseIcon);            letteredIcon.image = "https://www.google.cn/mapfiles/marker" + letter + ".png";            lat = Convert.ToDouble(dr["lat"]);            lng = Convert.ToDouble(dr["lng"]);            clat += lat;            clng += lng;            marker = new GMarker(new GLatLng(lat, lng), letteredIcon);            string sgm = "https://ditu.google.cn/maps?q=" + Server.UrlEncode(Server.UrlEncode(dr["branch"].ToString())) + "&hl=zh-CN&ie=UTF8"            + "&ll=" + lat + "," + lng + "&hq=" + Server.UrlEncode(Server.UrlEncode(dr["address"].ToString())) + "&z=15";            ballooncontent = "<center><b>" + dr["supplier"].ToString() + "</b><br />"                + "<A href='javascript：void(window.open(\"" + sgm + "\",\"_blank\"));'>" + dr["branch"].ToString() + "</A><br />"                + "</center>";            window = new GInfoWindow(marker, ballooncontent, false);            GMap1.Add(window);        }        clat /= dt.Rows.Count;        clng /= dt.Rows.Count;        GMap1.enableHookMouseWheelToZoom = true;        GMap1.setCenter(new GLatLng(clat, clng), 12);

The idea is actually the same, but it is not to fight JS, but to directly operate the GMap control. The bubble here is GInfoWindow, which contains Marker and bubble content. Marker is the position of the logo and the letter used to display it, ballooncontent is the bubble content that contains text and links. The links here are implemented in JS form.