Android Vector Indoor Map Development Example _android

The development of Vector indoor map

Because of the need of the company project, we need to develop a set of indoor map and realize the planning function of the route. Because has not done this aspect of development before, the relevant information is also relatively few, so can only one person to grope. At first I was using a normal bitmap to use as a map, but this also let me in the back to eat a lot of pain.

We know that maps generally have the ability to zoom and drag, just as I used the map developed by the bitmap sample, I found a lot of problems:
1, bitmap scaling will be distorted;
2, the picture loading is slow;
3, will cause the client memory overflow
。。。

Because of these problems, I have to give up this method. To solve the above problem, you can only use the vector map to develop the so I used the HTML5 for the development of vector graphics, not only solve the problem such as map scaling distortion, but also for Android, iOS, and so on, personal feeling effect is quite good, let me introduce this method:

One, vector map

Because it is a vector map, it must have vector data, then you may have to understand the SVG, here I do not introduce, we want to learn from the Internet to search a lot of relevant introduction, the following is a map of a format:

/** * Created by the Administrator on 2015/11/5. * * $.FN.VECTORMAP (' addmap ', ' us_aea_en ', {"insets": [{"width": "," Top ": 440," height ": 146.91581 57558812, "bbox": [{"Y": -8441281.712315228, "x": -5263934.893342895}, {"Y": -6227992.545028123, "x":- 1949631.2950683108}], "left": 0}, {"width": C, "top": 460, "height": 129.05725678001465, "bbox": [{"Y":-4207380.6 90946597, "x": -5958501.652314129}, {"Y": -3658201.4570359783, "x": -5618076.48127754}], "Left": 245}, {"width": 90 0.0, "top": 0, "height": 550.2150229714246, "bbox": [{"Y": -5490839.2352678, "x": -2029243.6460439637}, {"Y":-2690044.48 5299302, "x": 2552083.9617675776}], "left": 0}], "Paths": {"bh-China Construction Bank": {"path": "m567.065,977.503h56.717 v120.192h-56.717v977.503z "," name ":" China Construction Bank "}," bh-Huang Huang ": {" path ":" m726.819,646.031h103.775v49.061h726.819v646.031z "," name ":" Huang Huang "}," bh-Bai Hui Service Center ": {" path ":" m746.113,458.64v46.49v3.559v46.49h80.856v-46.49v-3.559v-46.49h746.113Z "," name ":" Bai Hui Service Center "}," BH-01 ": {" path ":" m746.113,365.117h84.245v96.714h-84.245v365.117z "," name ":" None "}," bh-Nine suspected rice noodles ": {" path ":" m598.614,599.228v46.803v2.258v46.802h131.719v-46.802v-2.258v-46.803h598.614z "," name ":" Nine rice noodles "} , "BH-02": {"path": "m598.614,552.426h131.719v49.061h598.614v552.426z", "name": "None"}, "bh-China Welfare Lottery ticket": {"path": " m598.614,505.624h79.599v49.061h-79.599v505.624z "," name ":" China Welfare Lottery "}," BH-03 ": {" path ":" M598.614, 459.134h79.599v49.061h-79.599v459.134z "," name ":" None "}," BH-04 ": {" path ":" M598.614, 402.612h79.599v59.22h-79.599v402.612z "," name ":" None "}," bh-black Dragon Tea ": {" path ":" M621.338, 977.503h56.716v120.192h-56.716v977.503z "," name ":" Black Dragon Tea "}," bh-steamed Delicious ": {" path ":" M675.61, 841.39h72.875v256.305h675.61v841.39z "," name ":" Steamed Delicious "}," bh-Set Letter Diet ": {" path ":" M828.102, 921.006h60.87v176.689h-60.87v921.006z "," Name ":" Collection Letter Diet "}," bh-clothing World ": {" path ":" M828.102, 841.39h60.87v81.99h-60.87v841.39z "," name ":" Clothing of the World "}," bh-Bai Hui Hotel ": {" path ":" M886.33,549.978h61.136v142.816h886.33v549.978z "," name ":" Bai Hui Apartment Hotel "}," bh-Fruit Beauty Body ": {" path ":" M889.937, 505.13h74.252v47.925h-74.252v505.13z "," name ":" Fruit Beauty Body "}," bh-Fiber Art Manicure ": {" path ":" M889.937,  
      460.764h74.252v47.924h-74.252v460.764z "," name ":" Art Manicure "}," height ": 1200.333,//map High" projection ": { 

 "Type": "AEA", "Centralmeridian": -100.0}, "width": 2384.0//map width});

Second, set the map scale

zoommin:0.5,
Zoommax:8,

Third, set the map background color

BackgroundColor: ' #FFF ',

Four, set the shop text map scaling

Onviewportchange:function (E, scale, TRANSX, Transy) { 
     console.log (' viewportchange ', scale, TRANSX, Transy); 
     var old = parseint ($ ("text"). CSS ("FontSize"); 
     Console.log ("Font size:" + old); 
     if (Scale < 2.5 | | | scale = = 2.5) { 
      $ ("text"). Hide (); 
     else if (Scale > 2.5 && scale < 3.5 | | scale = = 3.5) { 
      $ ("text"). CSS ("FontSize", 9); 
      $ ("text"). Show (); 
     else if (Scale > 3.5 && scale < 4.5 | | scale = = 4.5) { 
      $ ("text"). CSS ("FontSize"); 
      $ ("text"). Show (); 
     else if (Scale > 4.5 && scale < 5.5 | | scale = = 5.5) { 
      $ ("text"). CSS ("FontSize"); 
      $ ("text"). Show (); 
     else{ 
      $ ("text"). CSS ("FontSize"); 
      $ ("text"). Show (); 
     } 
    , 

Five, click the method of the shop trigger

Onmarkerover:function (event, index) { 
     console.log (' marker-over ', index); 
    }, 
    onmarkerout:function ( event, index) { 
     console.log (' marker-out ', index); 
    }, 
    onmarkerclick:function (event, index) { 
     Console.log (' Marker-click ', index); 
    }, 
    onmarkerselected:function (event, index, isselected, selectedmarkers ) { 
     console.log (' Marker-select ', index, isselected, selectedmarkers); 
     if (window.localstorage) { 
      window.localStorage.setItem ( 
       ' jvectormap-selected-markers-bh-1 '), 
       Json.stringify (selectedmarkers) 
      ); 
     } 
    , 

Vi.. Effect drawing

Thank you for reading, I hope to help you, thank you for your support for this site!