在实时跟踪中，我的GPS设备向我发送了Bing和Google Map的标题。在此基础上我使用箭头图像。但很多时候它显示出错误的方向。如何自动设置图像。
代码如
如果heading = 10则strImage =“Image / 10.jpg”
是否有任何设置箭头的选项。
答案 0 :(得分：0)
There are a number of different ways to do this.
Use a lot of images:
This is the approach you have indicated in your question. This consists of creating a bunch of arrow icons and then choosing the one that is closest to the GPS heading. This approach will work ok, but is only as good as the number of images you have. This approach is a lot of work and not the best option.
The CSS3 approach:
Start with an image of an arrow that points up. Then use the CSS3 transform to rotate the image. http://www.w3schools.com/cssref/css3_pr_transform.asp
Simply apply a CSS style to your pushpin that consists of:
transform-origin: 50% 50%;
transform: rotate([heading]deg)
The transform origin specifies that the transform rotation should occur around the center of the image.
Note that this approach will only work if you can use CSS with your pushpins. Some map controls let you, but newer map controls that use the HTML5 canvas don't support CSS on the pushpins. The above will work with IE10 and above. For IE9 you need to add a two more CSS styles that start with -ms-, similar things need to be done to support other older browsers.
The HTML5 Canvas Approach:
Similar to the CSS approach, but generates an image data URL allowing you to use this image in any map application that allows you to pass a URL as a custom pushpin (most if not all map controls). This method consists of creating an HTML5 canvas in memory, rotating it and drawing the arrow image on it, and then retrieving the data URL from the canvas and passing it in as the URL to an image. I wrote about this approach a while back in this blog (about halfway down): http://blogs.bing.com/maps/2013/04/10/html5-canvas-pushpins-in-javascript
This approach works with IE9 and above, and just about any browser that supports the HTML5 canvas.