对于个人需要，对于Xamarin.Forms.Map控件，我需要创建一个CustomPin扩展。UWP 部分（PCL 项目）
我创建了一个MapIcon喜欢它：
nativeMap.MapElements.Add(new MapIcon()
{
Title = pin.Name,
Image = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/Pin/customicon.png")),
Location = new Geopoint(new BasicGeoposition() { Latitude = pin.Position.Latitude, Longitude = pin.Position.Longitude }),
NormalizedAnchorPoint = new Windows.Foundation.Point(0.5, 1.0)
});
但是，通过这种方式，我无法设置Image的大小。
然后我想使用Image我的 PCL 部分中的 ，调整它的大小并将其转换为IRandomAccessStreamReference. 要实现它，我需要将我的Image转换为流，但我找不到使其工作的方法><
所需功能示例：
private IRandomAccessStreamReference ImageToIRandomAccessStreamReference(Image image)
{
//Here I can set the size of my Image
//I convert it into a stream
IRandomAccessStreamReference irasr = RandomAccessStreamReference.CreateFromStream(/* img? …我在我的应用程序中使用 bing 地图进行搜索。兵图V8控制。
我用过这个 CDN
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=api_key' async defer></script>
之后，当我尝试使用 Microsoft.Maps 时。它在说：
Uncaught ReferenceError: Microsoft is not defined
new Microsoft.Maps.Color(100,100,0,100);
有没有人对此有想法？
我想实现bingmap在角6使用“角图” NPM包，我已经请参考也被称为 问题陈述：在node_modules没有创建“bingmaps”文件夹
app.module.ts
/// <reference path="node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts" />
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MapModule, MapAPILoader, BingMapAPILoaderConfig, BingMapAPILoader, WindowRef, DocumentRef, MapServiceFactory, BingMapServiceFactory } from "angular-maps";
import { AppComponent } from './app.component';
错误：
./node_modules/angular-maps/fesm5/angular-maps.js 中的错误模块未找到：错误：无法解析 'D:\bingmap\bingmap\node_modules\angular-maps\fesm5' 中的 'bingmaps' i ?wdm ?: 编译失败。src/app/app.module.ts(1,23) 中的错误：错误 TS6053：文件 'D:/bingmap/bingmap/src/app/node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts ' 未找到。
也安装了 npm install --save @types/bingmaps
我正在使用leaflet-bing-layer插件，以便使用 Leaflet 添加基于 Bing 的地图。
因为我也在使用 OSM，所以我同时导入leaflet和leaflet-bing-layer. 导入语句如下：
import * as L from 'leaflet';
import * as B from 'leaflet-bing-layer';
以及组件内部传单的用法LeafletMapComponent：
constructor () {
this.baseMaps = {
OpenStreetMap: L.tileLayer ("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="https://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
}),
BingMap: B.tileLayer.bing(LeafletMapComponent.BING_KEY, {type: 'AerialWithLabels'})
};
}
不幸的是，lingBingMap: B.tileLayer.bing(...收到一个错误：
无法读取未定义的属性 'bing'
我没有在 Angular 和 Typescript 中找到任何 Bing 地图的工作示例，所以我想这里缺少一些东西。
对我做错了什么有任何想法吗？
如何在 vue js 应用程序中使用 bing maps api 来显示地图？
注意：我使用 Bing 地图 V8 和 vuejs 2.5.17。
这是我的模板
<template>
<div id="map"></div>
</template>
这是我的风格
<style lang="scss" scoped>
#map {
height: 300px;
width: 500px;
}
</style>
这是我的脚本部分（我使用基于类的对象组件）
mounted() {
let mapElement: HTMLElement = <HTMLElement>document.getElementById("map")
var map = new Microsoft.Maps.Map(mapElement, {
credentials: [API_KEY]
});
}
这就是我在我的应用程序中包含来自 cdn 的外部脚本的方式。经过一番研究，我发现并尝试了以下 2 个选项
选项 1：我已将脚本直接包含在我的 index.html 文件中：
<!-- index.html -->
...
<head>
...
<script src="https://www.bing.com/api/maps/mapcontrol?key=[API_KEY]" async defer></script>
</head>
选项 2：我以编程方式从我的组件中的安装方法中注入文档中的脚本，如下所示
mounted() {
// Add programmaticaly the external …我想创建组件以使用 TypeScript 在 React.js 中显示 bing 地图。
我知道github上有很多用于此目的的组件。但我想为自己从头开始创建这个组件。
我在react中创建了类，并在componentWillMount函数中将脚本标记注入到head我的html中：
componentWillMount() {
const script = document.createElement("script");
var scriptURL = "<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=" + this.props.apiKey + "' ></script>";
const scriptText = document.createTextNode(scriptURL);
script.appendChild(scriptText);
document.head.appendChild(script);
}
当我想在函数中创建地图后跟此文档componentDidMount时，如下所示：
componentDidMount() {
var map = new Microsoft.Maps.Map(this.mapElement);
}
我收到此错误：
找不到名称“Microsoft”。
我应该如何将“Microsoft”模块导入到我的组件中？
我声明了以下XAML:
<controls:PivotItem Header="map">
<my:Map x:Name="map"
CredentialsProvider="Hidden"
Mode="Road"
Center="{Binding AppState.MapCenter}"
ZoomLevel="15">
<my:Pushpin Location="{Binding AppState.MapCenter}" />
</my:Map>
</controls:PivotItem>
绑定工作正常 - 除了地图不保持居中(最初它使用Center属性上的绑定正确居中).该应用程序允许用户浏览具有不同GeoCoordinates的一系列记录.当发生这种情况时,绑定的Pushpin会相应地移动,但最终会从地图移开,因为地图不会重新居中.如何使用数据绑定使地图重新居中？
从这个页面http://www.bingmapsportal.com/isdk/ajaxv7#CreateMap1我能够创建一个地图.这是html代码:
<div class="fluid-row" style="height:300px;">
<div class="span12">
<div id="prdmap" class="map">
</div>
</div>
和javascript:
var map = null;
$(document).ready(function(){
map = new Microsoft.Maps.Map(document.getElementById('prdmap'), {
credentials: 'api_key',
enableSearchLogo: false,
enableClickableLogo: false
});
map.setView({mapTypeId : Microsoft.Maps.MapTypeId.road});
});
但是当地图加载时,它会占据所有屏幕,而不是高度和容器的高度.是否可以采用容器div的高度和宽度？
我正在使用Bing Maps AJAX V7 map API进行开发,我正在尝试将光标设置为不同的东西,同时将鼠标悬停在不同的地图元素上.例如,当鼠标滚过图钉时,这就是我正在做的事情:
Microsoft.Maps.Events.addHandler(g_map, "mousemove", function (event) {
if (event.targetType === "pushpin") {
g_map.getRootElement().style.cursor = "pointer";
}
});
我无法弄清楚的是如何在用户将鼠标移出图钉后恢复正常功能.我想也许可以将光标设置为鼠标中心上的指针,然后返回鼠标左边的非指针,但我不确定这是不是最好的方法.
请求:
我来自不同的互联网位置,json对象.
这些包含我放在BingMap上的多个Geocoordinates.这非常有效.
问题:
但是当我从互联网位置获取数据时,我得到了阻止ui.有没有办法在后台运行？
我尝试了异步功能,但我也有阻止UI ...
这里有一些代码来电
public async void Caller_Click(){
await jsonDataClass.DoOperations();
}
jsonDataClass中的方法
public async Task<bool> DoOperations(){
// do requests and some stuff..
var fetchedElements = getdata(); // not async, because its in a portable lib
foreach (var element in fetchedElements)
OnEvent(element); // raises an event to assing the element to the Bing map
}
c# bing-maps portable-class-library windows-runtime winrt-async
bing-maps ×10
angular ×2
typescript ×2
ajax ×1
angularjs ×1
bing-api ×1
c# ×1
cdn ×1
components ×1
data-binding ×1
html ×1
javascript ×1
jquery ×1
leaflet ×1
marker ×1
reactjs ×1
uwp ×1
uwp-maps ×1
vuejs2 ×1
winrt-async ×1
xaml ×1