实现效果:根据楼盘名称实现地图定位、周边搜索;
代码:
html
<view class="mapinfo">
<view class="mapbd">
<map id="map"
longitude="{
{longitude}}"
latitude="{
{latitude}}"
scale="16"
enable-scroll="{
{enablescroll}}"
markers="{
{markers}}" />
</view>
<scroll-view class="mapbombox" scroll-x="{
{true}}">
<view class="mapiconbox" wx:for="{
{mapiconlist}}" wx:key="index" data-txt="{
{item.icontxt}}" bindtap="nearby_search">
<image mode="widthFix" src="{
{item.imgpath}}" class="mapicon" />
<view class="mapicontxt">{
{item.icontxt}}</view>
</view>
</scroll-view>
</view>
js:(需要下载地图sdk.js文件 官网下载地址https://lbs.qq.com/qqmap_wx_jssdk/index.html 以及 key
// pages/mapinfo/mapinfo.js
// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
/**
* 页面的初始数据
*/
data: {
latitude: 39.9167,
longitude: 116.3833,
mapheight: '600',
enablescroll: true,
selcity: '',
markers: [{
iconPath: "../../images/placeico.png",
id: 0