精华内容
下载资源
问答
  • 谷歌地图API允许web开发人员仅仅使用几行代码就可以通过其神奇的内置功能创建卓越的用户体验。然而,它也存在一个明显的不足——在映射标记方面缺乏灵活性和创造性。 当然,你可以添加自定义标记图像、工具提示和...

    一、 简介

    谷歌地图API允许web开发人员仅仅使用几行代码就可以通过其神奇的内置功能创建卓越的用户体验。然而,它也存在一个明显的不足——在映射标记方面缺乏灵活性和创造性。

    当然,你可以添加自定义标记图像、工具提示和相应的标签,但所有这些都是静态的、以面向文本的方式进行交互。此外,并不存在某种标准的方法来创建响应用户操作的交互式标记。

    我简直不满足于此,所以着手寻找一种创建真正独特的映射方法。

    本文正是想向你展示这种真正独特的标记映射方法。具体地说,我要向各位展示如何使用CSS3动画技术来标记地图。基于此技术,你可以让标记跳舞、扭动和隐藏,直至其能够以优雅的方式跳出荧屏。

    如果用户悬停在标记上,单击它或在地图外使用切换,你将能够使用任何CSS动画使其“复活”。本文将向你介绍一种简单的策略,你可以在你的任何项目中使用这种动画标记。作为你的比较参考,另外两个例子——Ryan Connolly(http://jsfiddle.net/ryanoc/86Ejf/)和Felipe Figueroa(http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254)都使用了类似于此的方法。

    二、基础知识

    你仅需要使用下面介绍的几个步骤即可为你地图上的标记添加CSS动画效果支持。

    (一) 第一步

    在你的标记上添加一幅图像。下面是你指定图像的代码方式:

    var catIcon = { 
     
        url: myImageURLhere, 
     
        //state your size parameters in terms of pixels 
     
        size: new google.maps.Size(7060), 
     
        scaledSize: new google.maps.Size(7060), 
     
        origin: new google.maps.Point(0,0) 
     
    } 
    

    (二) 第二步

    在标记声明中把参数optimized设置为false。这可以让你把每一个标记渲染为一个独立的DOM元素:

    var marker = new google.maps.Marker({ 
     
        position:latLng, 
     
        map: map, 
     
        // set the icon as catIcon declared above 
     
        icon: catIcon, 
     
        // must use optimized false for CSS 
     
        optimized: false 
     
    }); 
    

    (三) 第三步

    创建一个overlayView对象,它负责把所有标记组织到一个面板中,然后你可以从DOM中访问这个overlayView对象。请参考下面的代码:

    var myoverlay = new google.maps.OverlayView(); 
     
        myoverlay.draw = function ({ 
     
            this.getPanes().markerLayer.id='markerLayer'; 
     
        }; 
     
    myoverlay.setMap(map); 
    

    在上面代码调用getPanes()函数一行中,我们给标记层指定了一个id,这样就可以在CSS中使用它。这个overlayView对象将自动收集不在另一个图层中的任何标记。当然,在本例中,并没有提供其他层,因此此对象收集的是所有标记。

    (四) 第四步

    现在,我们使用CSS技术来实现把当前层中的所有标记添加动画效果。这种动画效果可以是只发生一次的,也可以是继续不断地发生的。请参考下面代码:

    #markerLayer img { 
     
      animation: pulse .5s infinite alternate; 
     
      -webkit-animation: pulse .5s infinite alternate; 
     
      transform-origin: center; 
     
      -webkit-transform-origin: center; 
     
    } 
    

    三、更加灵活的设置

    使用上面的步骤会让你立即将动画添加到所有标记上。在本节中,我们再来学习另外几个选项来更好地控制动画标记。

    (一) 外部切换

    比如说,你想要包括一个图例或一些可点击的切换按钮,以便用户可以显示和隐藏不同的图层,或想使标记具有某种特征从而更改其相应的CSS动画。所有这些想法都是很容易实现的!你只需使用一个jQuery.click()处理器函数即可,请参考如下代码片断:

    $('.btn').click(function(){ 
     
       $('#markerLayer img').css('animation''myAnimationOptionsHere'); 
     
       $('#markerLayer img').css('-webkit-animation''myAnimationOptionsHere') 
     
    }) 
    

    (二)创建click/hover事件

    当用户将鼠标悬停在一个标记或单击它时想要添加一个简短的动画吗?那也不难。首先,创建一个全局数组来存储所有的标记:

    var allMarkers=[];

    然后,当你声明每一个标记时,添加一个title属性并把它转换为字符串类型:

    var marker = new google.maps.Marker({ 
     
        position:latLng, 
     
        map: map, 
     
        icon: catIcon, 
     
        optimized: false, 
     
        title: allMarkers.length.toString() 
     
    }); 
    

    接下来,添加一个依赖于数组长度的title属性,从而为每一个标记创建一个独一无二的id。最后,使用如下代码把标记添加到数组中:

    allMarkers.push(marker); 
    

    最后,我们来看一下click和hover事件的实现代码。注意:我们通过使用单个标题标识符来标识每个标记:

    google.maps.event.addListener(marker, 'click'function({ 
     
      var thisTitle= Number(this.title); 
     
      $('#markerLayer img').eq(thisTitle).css()... 
     
    }) 
     
    google.maps.event.addListener(marker, 'mouseover/mouseout'function({ 
     
      var thisTitle= Number(this.title); 
     
      $('#markerLayer img').eq(thisTitle).css()... 
     
    }) 
    

    (三) 针对不同标记使用不同动画效果

    我们不妨考虑把两个单独的标记类型添加到一张地图中的情形:棒球场地和足球场地。因为两者都自动包括在你创建的覆盖层,你需要通过某种方法实现把独立的动画效果应用于不同的标记。这是很容易做到的!只需要在你的CSS中使用src属性并使用各自标记对应的图像URL来匹配就可以了。请参考下面代码:

    #markerLayer img[src='/img/myURLpath'] { 
     
        animation: pulse .5s infinite alternate; 
     
        -webkit-animation: pulse .5s infinite alternate; 
     
        transform-origin: center; 
     
        -webkit-transform-origin: center; 
     
    } 
    

    四、小结

    作为一名开发人员或设计师,你的主要工作是开发出您的用户喜欢的产品。事实上,他们已经在正使用的产品中见过很多的谷歌地图应用。现在,由你来满足他们的更热切的期望吧!

    最后,提供几种使用地图标记动画来满足您的用户需求的途径:

    l 如果你拥有模拟实际事物(如猫)的标记图像,那么,你可以使用一个对应的CSS动画来模拟自然的运动。

    l 如果你的地图标记图像并非实际移动的物体(例如柜台),那么你可以使用CSS动画效果来模仿当点击它们时这些图像表现得很兴奋,例如跳跃或者打颤的动画效果。

    l 如果你拥有对应于每个标记的数据,那么你可以使标记相应于这些数据作出反应。例如,你可以标记出交通繁忙的十字路口:你可以把一个闪烁的感叹号放在这些地方。

    试试看吧,努力坚持下去,你的用户群肯定会纷至沓来!

    展开全文
  • 谷歌地图动画 大意 (Main Idea) First, we have 2 things that need to be clarified before getting your hands dirty. 首先,在弄污双手之前,我们需要澄清两件事。 GMSPath: An immutable array of ...

    谷歌地图动画

    大意 (Main Idea)

    First, we have 2 things that need to be clarified before getting your hands dirty.

    首先,在弄污双手之前,我们需要澄清两件事。

    GMSPath: An immutable array of CLLocationCooordinate2D

    GMSPath :CLLocationCooordinate2D的不可变数

    GMSPolyline: A route that is drawn and displayed on a map view

    GMSPolyline :在地图视图上绘制并显示的路线

    So, we will iterate each location on a GMSPath then create a new GMSPath and new GMSPolyline with new colors to make it looks like an animation

    因此,我们将迭代GMSPath上的每个位置,然后使用新颜色创建新的 GMSPath新的 GMSPolyline ,使其看起来像动画

    实行 (Implement)

    取得路线 (Get a route)

    This is not the main part of this article so we will go fast.

    这不是本文的主要部分,因此我们将快速进行。

    Google supports us Google Direction API to get a route that goes through valid coordinates. After finish calling API, you will get an array of routes and you can pick one, then find the parameter is overview_polyline, you can see the encoded route, this is how it looks like.

    Google支持我们使用Google Direction API,以获取经过有效坐标的路线。 调用完API后,您将获得一个路由数组,可以选择一个路由,然后找到参数overview_polyline ,可以看到编码后的路由,这就是它的样子。

    Image for post
    Encoded route when request google direction API
    请求Google Direction API时的编码路线

    Here’s the example to let you have an overview of this step, the full example repo is attached at the bottom of this article

    这是使您大致了解此步骤的示例,完整的示例存储库位于本文底部。

    在地图上绘制路线 (Draw a route on the map)

    Now, you get your encoded route, let’s draw it on the map.

    现在,您获得了编码路线,让我们在地图上绘制它。

    Create a path ( an array that contains valid coordinates) by

    通过以下方式创建路径(包含有效坐标的数组)

    GMSPath(fromEncodedPath: route)

    GMSPath(fromEncodedPath: route)

    And create a UI path with GMSPolyline by

    并通过GMSPolyline创建UI路径

    GMSPolyline(path: path)

    GMSPolyline(path: path)

    After finish this step, you can get and display the route on the map correctly. Here’s the example to let you have an overview of this step

    完成此步骤后,您可以正确获取并在地图上显示路线。 这是使您大致了解此步骤的示例

    Now, your map looks like, just a normal route, without animations

    现在,您的地图看起来就像一条普通路线,没有动画

    Image for post

    动画路线 (Animate a route)

    Create a timer to update a new route after x second

    创建计时器以在x秒后更新新路线

    With this line below, we will go through each coordinate on the path every 0.01 second and call this function animatePolylinePath

    在下面的这一行中,我们将每0.01秒animatePolylinePath路径上的每个坐标,然后将此函数animatePolylinePath

    timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(self.animatePolylinePath), userInfo: nil, repeats: true)

    timer = Timer.scheduledTimer(timeInterval:0.01,target: self ,选择器: #selector ( self .animatePolylinePath),userInfo: nil ,重复: true )

    As we discussed above, we’ll create a newPath and a newPolyline then add each coordinate on the path to newPath and create a new style or a new color for newPolyline. After finish iterating, you can restart the timer again to make it animate infinity

    如上所述,我们将创建一个newPath和一个newPolyline,然后将每个坐标添加到newPath路径上 ,并为newPolyline创建新样式或新颜色 迭代完成后,您可以再次重新启动计时器,使其变为无穷大动画

    Yay, now we have an animation route from Old Trafford stadium to Etihad stadium like this

    是的,现在我们有了一条从老特拉福德 球场阿提哈德球场的动画路线

    Image for post

    Let’s try with gradient route with animation by using GMSStyleSpan with two colors

    让我们通过使用GMSStyleSpan来尝试动画的渐变路线 有两种颜色

    Here’s the result

    这是结果

    Image for post

    Dash animation

    短跑动画

    Create a color dash and clear dash (each dash length is calculated base on the map view and zoom level)

    创建一个颜色破折号清除破折号 (每个破折号的长度是根据地图视图和缩放级别计算的)

    Here’s the result

    这是结果

    Image for post

    Full code for your try

    完整代码供您尝试

    翻译自: https://levelup.gitconnected.com/animated-routes-on-google-maps-5de4f32261d7

    谷歌地图动画

    展开全文
  • css怎么创建动画Original image: DeviantArt 原始图像: DeviantArt The Google Maps API allows web developers to create an excellent user experience with just a few lines of code through their magical, ...

    css怎么创建动画

    Animated Google Maps markers

    Original image: DeviantArt

    原始图像: DeviantArt

    The Google Maps API allows web developers to create an excellent user experience with just a few lines of code through their magical, built-in functions.

    Google Maps API使Web开发人员可以通过其神奇的内置函数以几行代码创建出色的用户体验。

    However, there’s one glaring exception: flexibility and creativity with map markers.

    但是,有一个明显的例外:使用地图标记的灵活性和创造力。

    Sure, you can add a custom marker image, a tooltip, and a label. But those are all static, text-oriented ways of interacting, which can become overwhelming on a map with many points. There’s no standard way to create interactive markers that respond to the user’s actions.

    当然,您可以添加自定义标记图像, 工具提示标签 。 但是,这些都是静态的,面向文本的交互方式,在具有许多点的地图上可能会变得不知所措。 没有标准方法来创建可响应用户操作的交互式标记。

    I simply wasn’t satisfied with this, so I set out to find a way to create truly distinctive maps. I’m going to show you how to include CSS3 animations on your map markers so that you can have them dance, wriggle and hide until they pretty much jump out of the screen.

    我对此并不满意,所以我着手寻找一种创建真正独特地图的方法。 我将向您展示如何在地图标记上包括CSS3动画,以便您可以让它们跳舞,蠕动和隐藏,直到它们几乎跳出屏幕为止。

    If the user hovers over a marker, clicks on it or uses a toggle outside the map, you’ll be able to use any CSS animation to bring it to life. This guide will focus on a simple strategy you can use to include animated markers in any of your projects. (For comparison, two other examples — by Ryan Connolly and Felipe Figueroa — use a similar method.)

    如果用户将鼠标悬停在某个标记上,单击该标记或在地图外部使用切换开关,则可以使用任何CSS动画将其栩栩如生。 本指南将重点介绍一种简单的策略,您可以使用该策略在任何项目中包括动画标记。 (为了进行比较,另两个示例( Ryan ConnollyFelipe Figueroa编写 )使用了类似的方法。)

    Here’s a basic example of animated markers at work. The famous Cheshire Cat acts as a marker for three separate points in Massachusetts, and you can use the toggle in the top right to change his animations:

    这是工作中的动画标记的基本示例。 著名的柴郡猫(Cheshire Cat)充当马萨诸塞州三个独立点的标记,您可以使用右上角的切换按钮更改其动画:

    See the Pen CSS Google Map Markers by SitePoint (@SitePoint) on CodePen.

    请参阅CodePen上的SitePoint ( @SitePoint )的Pen CSS Google Map Markers

    基础 (The Basics)

    There a few steps you’ll need to take to add CSS animation capabilities to your markers.

    您需要采取一些步骤将CSS动画功能添加到标记中。

    第1步 (Step 1)

    Add an image to your markers. This is how you specify your image:

    将图像添加到标记。 这是您指定图像的方式

    var catIcon = {
        url: myImageURLhere,
        //state your size parameters in terms of pixels
        size: new google.maps.Size(70, 60),
        scaledSize: new google.maps.Size(70, 60),
        origin: new google.maps.Point(0,0)
    }

    第2步 (Step 2)

    Add optimized:false to the marker specification. This allows you to render each marker as a separate DOM element:

    在标记规范中添加optimized:false 。 这使您可以将每个标记呈现为单独的DOM元素

    var marker = new google.maps.Marker({
        position:latLng,
        map: map,
        // set the icon as catIcon declared above
        icon: catIcon,
        // must use optimized false for CSS
        optimized: false
    });

    第三步 (Step 3)

    Create an overlayView that will organize all your markers in one pane, which you can then access from the DOM:

    创建一个overlayView ,它将在一个窗格中组织所有标记 ,然后您可以从DOM中进行访问:

    var myoverlay = new google.maps.OverlayView();
        myoverlay.draw = function () {
            this.getPanes().markerLayer.id='markerLayer';
        };
    myoverlay.setMap(map);

    You can give your marker layer an id on the getPanes() line so you can use it in CSS. This Overlay view will automatically collect any markers that are not already in another layer. In this case, there are no other layers, so it collects all markers.

    您可以在getPanes()行上为标记层指定一个id ,以便可以在CSS中使用它。 此叠加视图将自动收集尚未在另一层中的所有标记 。 在这种情况下,没有其他层,因此它将收集所有标记。

    第4步 (Step 4)

    Use CSS to give an animation to all markers in your layer. This can be an animation that happens once, or happens continuously:

    使用CSS将动画赋予图层中的所有标记。 这可以是一次或连续发生的动画:

    #markerLayer img {
      animation: pulse .5s infinite alternate;
      -webkit-animation: pulse .5s infinite alternate;
      transform-origin: center;
      -webkit-transform-origin: center;
    }

    灵活性选项 (Flexibility Options)

    The above steps will let you add an animation to all markers immediately, so here are a few options for greater control over animating your markers.

    通过上述步骤,您可以立即将动画添加到所有标记,因此,这里有一些选项可以更好地控制标记的动画。

    外部拨动 (External toggle)

    Let’s say you want to include a legend or some clickable toggles so that users can show and hide different layers, or have markers with certain features change their CSS animation. That’s easy! Just use a jQuery .click() handler, like this:

    假设您要添加图例或一些可单击的切换,以便用户可以显示和隐藏不同的图层,或者使具有某些功能的标记更改其CSS动画。 这很简单! 只需使用jQuery .click()处理程序,如下所示:

    $('.btn').click(function(){
       $('#markerLayer img').css('animation', 'myAnimationOptionsHere');
       $('#markerLayer img').css('-webkit-animation', 'myAnimationOptionsHere')
    })

    点击/悬停时 (On click/hover)

    Want to add a brief animation when users hover over one marker, or click on it? Let the hackiness begin! First, create a global array to store all your markers:

    是否想在用户将鼠标悬停在一个标记上或单击它时添加简短的动画? 让骇客开始吧! 首先,创建一个全局数组来存储所有标记:

    var allMarkers=[];

    Then, when you declare each marker, add a title attribute and stringify it:

    然后,在声明每个标记时,添加一个title属性并将其字符串化:

    var marker = new google.maps.Marker({
        position:latLng,
        map: map,
        icon: catIcon,
        optimized: false,
        title: allMarkers.length.toString()
    });

    Adding a title attribute that is dependent on the length of the array will create unique ids for each marker. Then add the marker to the array:

    添加依赖于数组长度的title属性将为每个标记创建唯一的id 。 然后将标记添加到数组中:

    allMarkers.push(marker);

    Finally, here are your click and hover events. You identify each individual marker by using this individual title identifier:

    最后,这是您的点击和悬停事件。 您可以使用以下单独的标题标识符来识别每个单独的标记:

    google.maps.event.addListener(marker, 'click', function() {
      var thisTitle= Number(this.title);
      $('#markerLayer img').eq(thisTitle).css()...
    })
    
    google.maps.event.addListener(marker, 'mouseover/mouseout', function() {
      var thisTitle= Number(this.title);
      $('#markerLayer img').eq(thisTitle).css()...
    })

    不同标记类型的不同动画 (Different animations for different marker types)

    Let’s say you add two separate marker types to a map: baseball fields and football fields. Since both are automatically included in your overlay layer, you need a way to apply separate animations to each of them. That’s easy! Just use the src attribute in your CSS and match it with the image URL of the respective markers:

    假设您在地图上添加了两种单独的标记类型:棒球场和足球场。 由于两者都自动包含在叠加层中,因此您需要一种将单独的动画应用于每个动画的方法。 这很简单! 只需在CSS中使用src属性,然后将其与相应标记的图片网址进行匹配即可:

    #markerLayer img[src='/img/myURLpath'] {
        animation: pulse .5s infinite alternate;
        -webkit-animation: pulse .5s infinite alternate;
        transform-origin: center;
        -webkit-transform-origin: center;
    }

    最后的想法 (Final Thoughts)

    Your main job as a developer or a designer is to build a product that your users love. They’ve seen plenty of Google Maps in the products that they already use. This is your opportunity to blow their expectations away!

    作为开发人员或设计师的主要工作是构建用户喜欢的产品。 他们已经在使用的产品中看到了大量的Google Maps。 这是您抛弃他们期望的机会!

    Here are a couple ways map marker animations can create delight for your users:

    地图标记动画可以通过以下几种方式为用户带来愉悦感:

    • If you have marker images that resemble actual things that move (like cats!), give them a CSS animation that corresponds to a natural movement.

      如果您的标记图像类似于实际移动的物体(例如猫!),请给它们提供与自然移动相对应CSS动画。
    • If you have map marker images that don’t traditionally move (like a store), apply an animation that makes it seem like the images are happy you clicked them, like a jump or a shudder.

      如果您有传统上不会移动的地图标记图像(例如商店),请应用动画,使其看起来像单击图像一样高兴,例如跳跃或颤抖。
    • If you have data that corresponds to each marker, make the marker react based on the data. Let’s say you’re labeling intersections that are heavily trafficked: you can put a flashing exclamation point over those areas.

      如果您具有与每个标记相对应的数据,请使标记根据数据做出React。 假设您要标记交通繁忙的交叉路口:您可以在这些区域设置一个闪烁的感叹号。

    Try it out, and wait for the user compliments to roll in!

    尝试一下,然后等待用户赞美!

    Did this guide help you? Let me know in the comments!

    本指南对您有帮助吗? 在评论中让我知道!

    翻译自: https://www.sitepoint.com/animated-google-map-markers-css-javascript/

    css怎么创建动画

    展开全文
  • 首先:创建工程时要以自己创建的应用的名字为工程名。(避免操作时只出现网格没有地图信息) 创建好工程后 第一步、引入BaiduMapAPI.framework 百度地图SDK提供了模拟器和真机两种环境所使用的framework,分别...

    创建好工程后
    第一步、引入BaiduMapAPI.framework
    百度地图SDK提供了模拟器和真机两种环境所使用的framework,分别存放在libs/Release-iphonesimulator和libs/Release-iphoneos文件夹下,开发者可根据需要使用真机或模拟器的包,如果需同时使用真机和模拟器的包,可以使用lipo命令将设备和模拟器framwork包中的BaiduMapAPI文件合并成一个通用的文件,命令如下:lipo -create Release-iphoneos/BaiduMapAPI.framework/BaiduMapAPI Release-iphonesimulator/BaiduMapAPI.framework/BaiduMapAPI -output Release-iphoneos/BaiduMapAPI.framework/BaiduMapAPI
    此时Release-iphoneos文件夹下的BaiduMapAPI.framework即可同时用于真机和模拟器(可以使用lipo–info 命令检查framework所支持的架构)。(真机测试时,不要忘记调iOS版本。另外:由模拟环境的framework,换为真机环境的framework时,不要忘记Link Binary With Libraries中的删除和添加)
    将所需的BaiduMapAPI.framework拷贝到工程所在文件夹下。在 TARGETS->Build Phases-> Link Binary With Libaries中点击“+”按钮,在弹出的窗口中点击“Add Other”按钮,选择BaiduMapAPI.framework文件添加到工程中,(若直接拖进入工程中的,而不是拖入工程文件下的这种情况,打开TARGETS->Build Phases-> Link Binary With Libraries时,会发现BaiduMapAPI.framework文件,已经被添加进去了,这样的话就不用再点击“Add Other”按钮进行添加了)。

    第二步、引入所需的系统库
    百度地图SDK中提供了定位功能和动画效果,v2.0.0版本开始使用OpenGL渲染,因此您需要在您的Xcode工程中引入CoreLocation.framework和QuartzCore.framework、OpenGLES.framework、SystemConfiguration.framework、CoreGraphics.framework、Security.framework。添加方式:在Xcode的Project -> Active Target ->Build Phases ->Link Binary With Libraries,添加这几个framework即可。

    第三步、引入mapapi.bundle资源文件
    如果使用了基础地图功能,需要添加该资源,否则地图不能正常显示
    mapapi.bundle中存储了定位、默认大头针标注View及路线关键点的资源图片,还存储了矢量地图绘制必需的资源文件。如果您不需要使用内置的图片显示功能,则可以删除bundle文件中的image文件夹。您也可以根据具体需求任意替换或删除该bundle中image文件夹的图片文件。
    方法:选中工程名,在右键菜单中选择Add Files to “工程名”…,从BaiduMapAPI.framework||Resources文件中选择mapapi.bundle文件,并勾选“Copy items if needed”复选框,单击“Add”按钮,将资源文件添加到工程中。(或者直接找到mapapi.bundle文件将其拖入工程并勾选“Copy items if needed”复选框即可)

    第四步、添加-ObjC
    在TARGETS->Build Settings->Other Linker Flags 中添加-ObjC。

    第五步、
    静态库中采用ObjectC++实现,因此需要您保证您工程中至少有一个.mm后缀的源文件(您可以将任意一个.m后缀的文件改名为.mm,一般直接将AppDelegate的.m文件改为.mm文件即可了),或者在工程属性中指定编译方式,即将Xcode的Project -> Edit Active Target -> Build -> GCC4.2 - Language -> Compile Sources As设置为”Objective-C++”

    第六步:

    自iOS SDK v2.5.0起,为了对iOS8的定位能力做兼容,做了相应的修改,开发者在使用过程中注意事项如下: 需要在info.plist里添加(以下二选一,两个都添加默认使用NSLocationWhenInUseUsageDescription):
    NSLocationWhenInUseUsageDescription ,允许在前台使用时获取GPS的描述
    NSLocationAlwaysUsageDescription ,允许永久使用GPS的描述

    第七步:

    在使用Xcode6进行SDK开发过程中,需要在info.plist中添加:Bundle display name ,且其值不能为空(Xcode6新建的项目没有此配置,若没有会造成manager start failed)

    第八步(官方文档中没有的一步,且容易导致只出现网格的一步)
    info.plist文件中的Bundle identifier 的值要与创建应用时设置的安全码一致(一模一样)

    第九步:引入头文件
    在使用SDK的类引入头文件:

    import

    import

    展开全文
  • 为了提升人机交互的体验,OpenLayers提供了一系列的地图动画效果,它们主要由ol.animation类提供,动画效果可以单独使用,也可以组合使用,下面开始介绍。 2、主要类和参数 在ol.animation中,最常用到的四个类如下...
  • Cocoa利用TexturePacker创建的纹理图集实现角色的帧动画 by 大熊猫侯佩 什么是TexturePacker TexturePacker是一个非常棒的纹理集制作工具,广泛应用在2D游戏的制作中。它可以支持多种开发平台,比如Unity,...
  • 斜角地图+透明动画

    2021-04-28 21:31:36
    1.斜角地图和透明动画的叠加 想出现类似下图的效果 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210428213109703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly...
  • 其实 CSS3 的功能也很强大,能帮助我们实现很多用 JavaScript 实现的效果,最近小编刚学会 HTML5 和 简单的 CSS3,在这里用 CSS3 实现了热点地图动画,效果如下: 下面给大家初步讲讲,如何用 CSS3 制作一个热点...
  • JavaScript 的热点地图十分常见,但是使用 CSS3 制作的热点地图或许你就没有听说过了。其实 CSS3 的功能也很强大,能帮助我们实现很多用 JavaScript 实现的效果,...
  • 使用mapv和mapvgl两个框架来实现百度地图的可视化。 Mapv 是一款地理信息可视化开源库,可以用来展示大量地理信息数据,点、线、面的数据,每种数据也有不同的展示类型,如直接打点、热力图、网格、聚合等方式展示...
  • 说起Expression Blend ,开发过Silverlight 或者WPF的同学肯定会暗爽一把... 年底又好消息不断,微软和NOKIA组成战略合作伙伴,NOKIA将把携地图数据与营销能力加入WP7的创新等,无疑给我们WP7开发者一剂强心剂。好...
  • 返回总目录 第七章 寻路与地图对象(Pathfinding and Map Object) 这一章主要进行寻路与...六 在地图中创建地图对象(Create Map Object in Map) 1 修复 SRPG Tile 无法保存的错误(Fix Bug of SRPG Tile )...
  • 2、步骤 2.1、创建几何体和材质 let cubeGeometry = new THREE . BoxGeometry ( 10 , 10 , 10 ) ; let cubeMaterial = new THREE . MeshNormalMaterial ( { morphTargets : true } ) ; ...
  • 1.iOS百度地图下载地址 http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 根据需要选择不同的版本 这里以自定义下载 开发包 为案例下载这个 2.下载得到一个名字为BaiduMap_IOSSDK_v2 的...
  • power bi 创建空表 介绍 (Introduction) This is the fifth article of a series dedicated to discovering geographic map tools in Power BI. 这是致力于在Power BI中发现地理地图工具的系列文章的第五篇。 ...
  • // 初始化 //创建标注 let p = new BMap.Point(markerPoint.lng,markerPoint.lat); let m = new BMap.Marker(p,{icon:myIcon}); map.addOverlay(m) let startBtn = document.getElementById('startBtn') // 开始 ...
  • @[vue.js 百度地图上,路线轨迹的3D动画展示] 百度地图很强大,也为开发者提供很好的开发接口。今天教大家一个3D地图上路线轨迹可视化的小功能。 步骤: 第一步:申请 ak, 很简单。 ...第二步:配置。...
  • 调用 hgeCreate函数得到HGE引擎指针----这是个标准的C语言函数,从以前阅读这个引擎的部分代码得知,引擎内部模仿了COM,采用引用计数的方式创建引擎对象。  3. 设置引擎状态值: System_SetState。在这里必须...
  • Android 在高德地图里面自定义多个Marker,Marker设置缩放动画 一、使用步骤 1.引入库 在app的build.gradle里面添加 implementation files(‘libs/Android_Map3D_SDK_V7.4.0_20200416.jar’) implementation files...
  • 这些教程虽然大多是基于cocos2d或其他游戏平台,但创建地图步骤基本上是一样的,所以同样有很好的参考价值。因此,我这里将把重点放在探讨编辑后的地图(.tmx文件)在CitrusEngine的使用方法上~ 那么在开始...
  • 使用百度的东西当然需要key了 ...自己可以免费申请一个百度地图web端的key 把可以加入页面中 这个key,copy去应该可以使用 <script type="text/javascript" src="http://api.map.baidu.co...
  • 介绍 (Introduction) This is the fourth article of a series dedicated to discovering ... 这是致力于在Power BI中发现地理地图工具的系列文章的第四篇。 In the ToC below the article you can ...
  • 地图创建创建过程分四步:准备工程创建地图视图自定义地图配置绑定地图生命周期按照以下操作步骤,正常运行工程,展示基础地图的效果如图:提前准备按照AndroidStudio配置完成之后,在应用工程中新建一个Activity文件...
  • 第五章 颜色映射与职业动画 四 测试与创建Class Animator 1 测试颜色映射 以下步骤来准备测试一个颜色映射。 创建多个Color Chart; 设置它们的颜色; 从角色贴图中拉入一个Sprite,...
  • 首语 这是Android动画系列的目录,有兴趣的可以学习:Android动画。 在某些情况下,图片需要在屏幕上呈现动画效果。如果您希望显示由多张图片...使用该选项,您可以指定多个静态图片资源(每次展示一个)来创建动画...
  • 动画+3D转换笔记

    2021-01-02 11:39:25
    制作动画步骤 定义动画 调用动画 keyframes定义动画 @keyframes 动画名称{ 0%{ 样式 } 100%{ 样式 } } 0%是动画的开始,100%是动画结尾。这样的规则就是动画序列 在@keyframes中规定某项CSS样式,就能...
  • 用Tableau实现动画数据可视化

    千次阅读 2020-07-06 17:33:37
    我们将在这里使用开源数据集,并在Tableau中创建自己的动画可视化 介绍 我是动画视觉化的超级粉丝。我喜欢数据点在我屏幕上跳舞的方式。他们用线条和点来讲述他们自己的故事。设计一个动画是一种艺术。 我经常用...
  • 模型与动画

    2020-11-17 18:06:28
    创建一个地图和若干巡逻兵(使用动画); 每个巡逻兵走一个3~5个边的凸多边型,位置数据是相对地址。即每次确定下一个目标位置,用自己当前位置为原点计算; 巡逻兵碰撞到障碍物,则会自动选下一个点为目标; 巡逻兵在...
  • 本文主要是最近帮助好友研究...使用C# Winform显示百度地图主要包括两个步骤: 1.调用百度地图API,通过申请的密钥AK访问JavaScript版本地图; 2.再在C#中webBrowser浏览器控件中访问JS文件,显示地图到窗口。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,234
精华内容 2,493
关键字:

创建地图动画的步骤